今天咱们来使用canvas绘制一个带动画效果的圆形进度条 知识点包括 canvas的基本知识点 常用的小技巧 缓动公式; 圆弧上某个点的xy坐标计算 ; requestAnimationFrame 的

前言 相信看到此文的小伙伴们，平时工作中多多少少应该会接触过进度条方面的需求，比如直角进度条、圆角进度条、圆环进度条等，大家可能也有多种方法比如利用 CSS canvas svg去实现这些需求并予以加

如果选使用<script>直接引入js文件，可点击下载arc-progress.min.js文件。 如图所示标注了弧形的起点和重点，方向为顺时针。如果你想绘制一个圆形进度条，可以设置arcStart为-90，arcEnd为270。如果想绘制一个半圆，可以设置arcStart为1…

很多时候，我们需要自己实现一个环形进度条，现有UI框架不满足需求的时候，我们就可以使用svg来自己实现一个。

实现步骤：绘制一个圆；绘制圆环；绘制进度环；绘制文字；一、创建画布二、绘制一个圆三、绘制圆环：四、绘制进度环五、绘制文字六、完整代码查看效果进度条参考资料使用canvas来绘制图形原文