JS+canvas画一个圆锥实例代码

时间：2021-05-26

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

<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>

这是测试后的完成图：

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章