最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
canvas实现环形进度条效果
时间：2017-07-20 编辑：简简单单 来源：一聚教程网
昨下午睡着了，晚上打开手机才发现朋友给我发了一个QQ消息，问我这个怎么实现？
这里就选canvas来简单写一下 先上代码，然后在说一说需要注意的点：
| 代码如下 | 复制代码 |
| |
接下来说一些注意点和我写的过程中碰到的疑问：
疑问：
01 整体代码没有封装成一个组件，感兴趣的同学可以封装一下。 我这有时间也会封装。
02 画文字的时候只能单独画一行文字么？ 怎样进行换行？
03 canvas怎样处理响应式？
注意点：
01 画布平移之后，画布上的点也会被平移，所以我在定义第一个小矩形的起始点的时候才会重新定义一个负值。
02 直接画弧形来控制进度不准确，因为arc会自动closePath(),最终形成这样的一个效果。
03 默认圆的0度起始位置是从3点钟方向开始的（见上图），那么想从12点钟位置开始走进度，需要减去90度的角度。
04 requestAnimationFrame的回调函数在有参数的情况下还是需要传参数的，需要借助匿名函数回调，在执行体里面去执行想要loop的函数内容（可传参数）。否者会出现注释中写道的pecent不规则增加的问题。
先就这样，之后可能会结合一个上传图片的小功能尝试把它封装成一个组件。
相关文章
- canvas实现简易的圆环进度条效果 05-09
- canvas绘制环形进度条 04-27
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31