使用JS+canvas如何制作圆锥

本篇文章给大家讲解html中用canvas函数配合js画出一个圆锥形的图形实例，有需要的朋友学习测试下吧。

以下是我们给大家分享是实例代码：

const cvs =document.getElementById('cvs'); // 计算画布的宽度  const width = cvs.offsetWidth;  // 计算画布的高度 const  height = cvs.offsetHeight;const ctx = cvs.getContext('2d');  // 设置宽高  cvs.width = width;  cvs.height = height;/**ctx：contextx,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减1ctx.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:['#76e3ff','#2895ea'],height:60},{color:['#17ead9','#5d7ce9'],height:30},{color:['#1ca5e5','#d381ff'],height:40},{color:['#ffa867','#ff599e'],height:70},{color:['#ffa6e3','#ec6a70'],height:50},{color:['#f9c298','#d9436a'],height:30},{color:['#eb767b','#9971dc'],height:30},{color:['#f06af9','#5983ff'],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='top';ctx.textAlign='center';const fontSize = item.height/2>=40?40:item.height/2;ctx.font = fontSize + 'px serif';//const textMetrics = ctx.measureText('Hello World');ctx.fillStyle = '#ffffff';ctx.fillText('5000',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 = '#a4a4a4'; ctx.beginPath(); ctx.moveTo(xLineA , 0); ctx.lineTo(xLine +20, 0); ctx.stroke();ctx.restore();//描述文字ctx.save();ctx.translate(cX , cY );ctx.textBaseline='middle';ctx.textAlign='left';ctx.font = '22px serif';//const textMetrics = ctx.measureText('Hello World');ctx.fillStyle = '#4a4a4a';ctx.fillText('进入收件列表2',xLine+gap ,0);ctx.restore();//转化率文字ctx.save();ctx.translate(cX , cY );ctx.textBaseline='middle';ctx.textAlign='left';ctx.font = '28px bold serif ';ctx.fillStyle = '#007dfd';ctx.fillText('20%',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);})();

登录后复制

这是脚本之家测试后的完成图：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Django与Vue语法中存在冲突问题如何解决

在Django与Vue语法中存在冲突问题如何解决

在Django与Vue语法中存在冲突问题如何解决

以上就是使用JS+canvas如何制作圆锥的详细内容，更多请关注【创想鸟】其它相关文章！