利用 Canvas 绘画一个未闭合的带进度条的圆环
最终效果图
一、定义变量
定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色
let radius = 75 let thickness= 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#f2d7d7";
二、画第一个圆弧
ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
注意 beginPath() 这个方法,生成路径的第一步。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。 也就是说,这个方法可以用来给 Canvas图像 分组,绘制新的图形如果不调用此方法,那么新的图形会和前面的图形连接在一起
三、画第一个连接处
ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)
连接外是用二次贝塞尔曲线来画的,Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方法接受4个参数,第一、二个参数为控制点,第三、四个参数为结束点[官方文档][1] 只需算出控制点和结束点,就可以画出一个圆弧 [1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
四、画第二个圆弧
ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
注意方法后面最后一个参数,设置为true,代表逆时针绘制(默认是顺时针)
五、画第二个连接处
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
这一步其实和第三步相差不大,简单的调换了下参数位置
六、填充
ctx.fill();
至此,一个简单的未闭合的圆环就完成了
画第二个进度条圆环
七、初始化
ctx.beginPath(); ctx.fillStyle = "#e87c7c";
beginPath 表示绘制新的图形,如果不调用此方法,那后面画的图形会和前面画的图形连在一起
八、绘制第二个进度条圆环
ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill();
由于和第一个圆环绘制方式一模一样,就不在重复了,区别仅仅是圆的弧度
九、旋转 Canvas
transform: rotate(-135deg);
由于css的旋转比较方便,也省去了角度的计算,所以本人使用的是css的transform来旋转的。当然 Canvas 也提供了旋转的方法
完整代码
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> <style> .ring { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } #tutorial { transform: rotate(-135deg); width: 150px; height: 150px; } .fraction { position: absolute; font-size: 30px; font-weight: bold; color: red; } .small { font-size: 12px; font-weight: lighter; } .title { color: red; bottom: 0; position: absolute; } </style> </head> <body> <div class="ring"> <canvas id="tutorial" width="150" height="150"></canvas> <span class="fraction">100 <span class="small">分</span> </span> <span class="title">服务分</span> </div> <script> let radius = 75 let thickness = 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#f2d7d7"; ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); </script> </body> </html>
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
木兰许可证 ≠ 木兰宽松许可证 ≠ 木兰公共许可证
月初,蚂蚁金服自研的数据库产品 OceanBase 宣布开源,采用木兰公共协议 MulanPubL-2.0 版,有文章将此协议简称为“木兰许可证”。 实际上,这种简称容易造成混乱。木兰系列许可证包含“木兰宽松许可证”和“木兰公共许可证”,均由北京大学作为牵头单位,依托全国信标委云计算标准工作组和中国开源云联盟,联合开源生态圈产学研优势团队和个体、尤其是开源法务和律师,起草、修订并发布。 木兰系列许可证幕后的负责人北大教授周明辉表示,宽松版本和公共版本都用了木兰前置词,是希望木兰形成体系和生态,一起繁荣发展,同时并不提倡大家使用“木兰许可证”去指代其中一个,容易造成混乱。 在木兰系列许可证中,木兰宽松许可证第 2 版(Mulan PSL2)已在 2020 年 2 月 14 日,通过开源促进会 OSI 的批准,成为中国第一个具有国际通用性的开源许可证,也是目前木兰系列知名度最高的许可证。因此,时常有人用“木兰许可证/协议”指代木兰宽松许可证第 2 版,但这种指代也并不准确。 许可证 英文简称 发布时间 木兰宽松许可证第1版 MulanPSL 2019年8月 木兰宽松许可证第2版 Mulan...
- 下一篇
如何往MySQL的大数据表添中加一列?
以前老版本 MySQL 添加一列的方式: 会造成锁表,简易过程如下: 新建一个和 Table1 完全同构的 Table2 对表 Table1 加写锁 在表 Table2 上执行 ALTER TABLE 你的表 ADD COLUMN 新列 char(128) 将 Table1 中的数据拷贝到 Table2 将 Table2 重命名为 Table1 并移除 Table1,释放所有相关的锁 如果数据量特别特别大,那么锁表时间很长,期间所有表更新都会阻塞,线上业务不能正常执行。 针对MySQL 5.6(不包含)之前的版本,通过触发器将一个表的更新在另一个表上重复,并进行数据同步,当数据同步完成时,业务上修改表名为新表并发布。业务不会暂停。触发器设置类似于: MySQL 5.6(包含)以后的版本引入了在线 DDL 的功能 其中的参数: ALGORITHM: DEFAULT:默认方式,在 MySQL 8.0中,如果未显示指定 ALGORITHM,那么会优先选择 INSTANT 算法,如果不行再使用 INPLACE 算法,如果不支持 INPLACE 算法则使用 COPY 的方式完成 INSTANT...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果