您现在的位置是：网站首页> 编程资料编程资料

利用 Canvas实现绘画一个未闭合的带进度条的圆环canvas实现有递增动画的环形进度条的实现方法详解利用canvas实现环形进度条的方法canvas实现圆形进度条动画的示例代码HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）

2023-10-12 313人已围观

简介这篇文章主要介绍了利用 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 也提供了旋转的方法

完整代码

canvas100 分服务分

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：使用Html5多媒体实现微信语音功能HTML5实时语音通话聊天MP3压缩传输3KB每秒鲜为人知的HTML5语音合成功能基于Html5实现的语音搜索功能HTML5为输入框添加语音输入功能的实现方法Jquery+html5可设置闹钟并且会语音提醒的时钟特效源码用html5实现语音搜索框的方法HTML5语音识别标签写法附图html5的新玩法——语音搜索HTML5 语音搜索只需一句代码HTML5 语音搜索(淘宝店语音搜素)

下一篇：html5录音功能实战示例HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能详解HTML5 录音的踩坑之旅HTML5录音实践总结(Preact)

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢