canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
类别:Web前端 浏览量:373
时间:2021-10-02 01:52:06 canvas绘图画圆基本步骤
利用 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个参数,第一、二个参数为控制点,第三、四个参数为结束点官方文档
只需算出控制点和结束点,就可以画出一个圆弧
四、画第二个圆弧
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> <li class="ring"> <canvas id="tutorial" width="150" height="150"></canvas> <span class="fraction">100 <span class="small">分</span> </span> <span class="title">服务分</span> </li> <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
热门推荐
- apache协议内容(Apache中rewrite伪静态规则介绍)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- php语法基础知识(PHP中16个高危函数整理)
- docker redis安装配置(在docker中部署并启动redis的方法)
- 最低成本搭建云服务器(云服务器搭建难不难?企业云服务器搭建流程)
- iview 全局初始化组件(iview 权限管理的实现)
- ip承载网和数通区别(网络线路科普之CN2,GIA,CIA,BGP以及IPLC都是什么意思)
- pandas删除特定条件的行(pandas删除指定行详解)
- sql语句去除重复记录(使用SQL语句去掉重复的记录两种方法)
- 如何在mysql中批量插入数据(MySQL如何快速批量插入1000w条数据)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9