时间:2021-07-01 10:21:17 帮助过:15人阅读
以下是我们给大家分享是实例代码:
- <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: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:['#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如何制作圆锥的详细内容,更多请关注Gxl网其它相关文章!