本文摘自PHP中文网，作者零下一度，侵删。
下面总结了自己在项目中的圆形进度条效果的实现方式，希望对大家有帮助：此方法通过canvas绘制圆形的方法来实现动态圆环进度条，直接上代码，疑问请看注释：
HTML代码如下， 在页面里创建一个画布即可：
1 2 3 |
|
JS分两大部分，
第一部分实现整体功能，第二部分调用：
第一部分：
第一部分功能原理大概是，画两个圆，一个是底色圆，第二个是动态加载的圆弧，进度通过定时器加载；颜色加渐变色；
相关阅读 >>
html5+canvas调用手机拍照功能实现图片上传功能（图文详解下篇）
如何用canvas绘制矩形？canvas画矩形的两种方法介绍
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
