本篇文章给大家讲解html中用canvas函数配合js画出一个圆锥形的图形实例，有需要的朋友学习测试下吧。
以下是我们给大家分享是实例代码：
<html><head><title>我的第一个 html 页面</title></head><body><canvas id='cvs' width='1000' height="800"></canvas><script>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);})();</script></body></html>
这是脚本之家测试后的完成图：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在django与vue语法中存在冲突问题如何解决
有关js抽象工厂模式（详细教程）
使用javascript如何开发二维周视图日历
以上就是使用js+canvas如何制作圆锥的详细内容。