JS+canvas画一个圆锥实例代码
时间:2019-04-11
本文章向大家介绍JS+canvas画一个圆锥实例代码,主要包括JS+canvas画一个圆锥实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
以下是我们给大家分享是实例代码:
<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>
这是脚本之家测试后的完成图:
- SDP(4):ScalikeJDBC- JDBC-Engine:Updating
- SDP(3):ScalikeJDBC- JDBC-Engine:Fetching
- SDP(2):ScalikeJDBC-Connection Pool Configuration
- 使用外部表关联MySQL数据到Oracle(r6笔记第100天)
- 使用selenium模块模拟浏览器爬去网页,并进行点击定位内容笔记
- python 报错'gbk' codec can't encode character 'ue5d1' in position 0:
- python文件打开方式详解——a、a+、r+、w+区别
- 三封报警邮件的分析(r6笔记第95天)
- HCTF2017 部分 Web 出题思路详解
- 基于springboot+kotlin+gradle构建的框架的坑
- 创建Task的多种方法
- 运行map()后,报:<map object at 0x02629E50>解决方法与原因分析
- Gradle的快速入门
- Python笔记从html中提取字段
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【go】剑指offer: 删除链表结点O(1)时间复杂度
- Go快速查找有序二维数组的数字
- Go寻找数组中最小的k个数——全部排序和部分排序
- Spring高级技术应用——百战商城实现(下)
- Go 字符串反转问题解决思路
- 剑指offer:go实现从尾到头打印链表
- 【go】剑指offer:3种方法寻找二进制1的个数
- 高并发技术
- Working with Errors in Go 1.13
- Hadoop技术(二)资源管理器YARN和分布式计算框架MapReduce
- CDH——Cloudera’s Distribution Including Apache Hadoop
- 【go】剑指offer:用26个英文字母组合表示列数
- Flink——运行在数据流上的有状态计算框架和处理引擎
- goland破解教程
- HTTP接口设计