Maison > Article > interface Web > Comment créer un cône en utilisant JS+canvas

Comment créer un cône en utilisant JS+canvas

亚连original: 2018-06-21 10:59:362007parcourir

Cet article expliquera 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.

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>

Voici l'image terminée après le test Script House :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment résoudre le conflit entre la syntaxe Django et Vue

À propos du modèle de fabrique abstraite JS (tutoriel détaillé)

Comment développer un calendrier hebdomadaire en deux dimensions en utilisant Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript django html JS canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter le chargement paresseux des routes dans vue-routerArticle suivant：Comment implémenter le chargement paresseux des routes dans vue-router

Articles Liés

Voir plus