JS, Canvas dessine un code d'implémentation de cône-js tutoriel-php.cn

JS, Canvas dessine un code d'implémentation de cône

小云云

Libérer： 2017-12-14 09:28:11

original

1877 Les gens l'ont consulté

Cet article explique principalement comment utiliser la fonction canevas en HTML avec JS pour dessiner un exemple graphique conique. Les amis dans le besoin peuvent l'apprendre et le tester. J'espère que cela pourra aider tout le monde.

Voici l'exemple de code que nous partageons avec vous :

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<canvas id=&#39;cvs&#39; width=&#39;1000&#39; height="800">
</canvas>
<script>
const cvs =document.getElementById(&#39;cvs&#39;);

 // 计算画布的宽度
  const width = cvs.offsetWidth;
  // 计算画布的高度
 const  height = cvs.offsetHeight;
const ctx = cvs.getContext(&#39;2d&#39;);
  // 设置宽高
  cvs.width = width;
  cvs.height = height;
/**
ctx：context
x,y:偏移 纵横坐标
w:度
h:高
color:颜色 数组，可以把颜色提取出来方便自定义
*/
var Cone = function(ctx,x,y,w,h,d,color){
ctx.save();
ctx.translate(x, y);
var blockHeight=h;
// 中点
var x2 = 0;
var y2 = 20;
var k2 = 10;
var w2 = w;
var h2 = h;
// 递减度
var decrease = d; 
 ctx.beginPath();
ctx.moveTo(x2+w2,y2);
// 椭圆加了边框，所以加1减1
ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2-1, y2);

ctx.lineTo(x2-w2+decrease,y2+blockHeight);
ctx.bezierCurveTo(x2-w2+decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight);
ctx.lineTo(x2+w2+1,y2);
var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
linear.addColorStop(0,color[0]);
linear.addColorStop(1,color[1]);
ctx.fillStyle = linear ; 
ctx.strokeStyle=linear 
ctx.fill();
//ctx.stroke();
ctx.closePath();
//画椭圆
ctx.beginPath();
ctx.moveTo(x2-w2, y2);
ctx.bezierCurveTo(x2-w2, y2-k2, x2+w2, y2-k2, x2+w2, y2);
ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2, y2);
var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
linear.addColorStop(1,color[0]);
linear.addColorStop(0,color[1]);
ctx.fillStyle = linear ; 
ctx.strokeStyle=linear 
ctx.closePath();

ctx.fill();
ctx.stroke();

ctx.restore();
};
function dr(m){
const colorList =[
{
color:[&#39;#76e3ff&#39;,&#39;#2895ea&#39;],
height:60
},
{
color:[&#39;#17ead9&#39;,&#39;#5d7ce9&#39;],
height:30
},
{
color:[&#39;#1ca5e5&#39;,&#39;#d381ff&#39;],
height:40
},
{
color:[&#39;#ffa867&#39;,&#39;#ff599e&#39;],
height:70
},
{
color:[&#39;#ffa6e3&#39;,&#39;#ec6a70&#39;],
height:50
},
{
color:[&#39;#f9c298&#39;,&#39;#d9436a&#39;],
height:30
},
{
color:[&#39;#eb767b&#39;,&#39;#9971dc&#39;],
height:30
},
{
color:[&#39;#f06af9&#39;,&#39;#5983ff&#39;],
height:100
},
];
const space = 20;
let coneHeight = 0;
// 间隔
const gap = 20;
const x = 380;
const y = 20;
const angle = 30;
let coneWidth=0;
colorList.forEach((item)=>{
coneHeight += item.height +space;
});
// 最下面的先画(层级)
colorList.reverse().forEach((item,index)=>{
const decrease =Math.tan(Math.PI*angle/180)*(item.height+space);
coneWidth=coneWidth + decrease;
coneHeight = coneHeight-item.height - space;
//圆锥
Cone(ctx,x,coneHeight ,coneWidth ,item.height,decrease,item.color);
// 中点
const cX =parseInt(x)+0.5;
const cY = parseInt(coneHeight + space+ item.height/2)+0.5;
//文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;top&#39;;
ctx.textAlign=&#39;center&#39;;
const fontSize = item.height/2>=40?40:item.height/2;
ctx.font = fontSize + &#39;px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#ffffff&#39;;
ctx.fillText(&#39;5000&#39;,0,-fontSize/3);
ctx.restore();
const xLineA =parseInt(coneWidth-decrease/2)+10;
const xLine =parseInt(m+xLineA )>=x?x:m+xLineA ;
//线
ctx.save();
ctx.translate(cX , cY );
ctx.setLineDash([3,2]); 
ctx.strokeStyle = &#39;#a4a4a4&#39;; 
ctx.beginPath(); 
ctx.moveTo(xLineA , 0); 
ctx.lineTo(xLine +20, 0); 
ctx.stroke();
ctx.restore();
//描述文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;22px serif&#39;;
//const textMetrics = ctx.measureText(&#39;Hello World&#39;);
ctx.fillStyle = &#39;#4a4a4a&#39;;
ctx.fillText(&#39;进入收件列表2&#39;,xLine+gap ,0);
ctx.restore();
//转化率文字
ctx.save();
ctx.translate(cX , cY );
ctx.textBaseline=&#39;middle&#39;;
ctx.textAlign=&#39;left&#39;;
ctx.font = &#39;28px bold serif &#39;;
ctx.fillStyle = &#39;#007dfd&#39;;
ctx.fillText(&#39;20%&#39;,xLine+gap ,(item.height+gap)/2 );
ctx.restore();
});
}
let m=0;  
let gravity =10;   
(function drawFrame(){
      window.requestAnimationFrame(drawFrame,cvs);
      ctx.clearRect(0,0,cvs.width,cvs.height);
m += gravity;
      dr(m);
})();
</script>
</body>
</html>

Copier après la connexion

C'est après test par Script Photo terminée de la maison :