HTML5Canvas圆形倒计时进度条

圆形倒计时的进度条效果，挺适合做那种活动倒计时、秒杀提示啥的。基于 HTML5 的Canvas来画图，配合JavaScript控制时间和动画，整体思路清晰，改起来也不难。

Canvas 的 arc()方法用得挺巧，圈圈绘制得蛮自然的。进度条随着倒计时一点点减少，视觉效果直观。而且还能通过CSS自定义颜色、边框、线宽，想怎么改风格都行。

定时器就用setInterval()搞定，每秒更新一次剩余时间，再去调整圆弧角度。你甚至可以加点CSS3 动画，让整个倒计时更顺滑一点，比如渐变填充、颜色过渡那种。

里面的texiao2932_1560680995压缩包是源码文件，解压看看，应该有 HTML、JS 和 CSS 三个主要文件。直接插进项目里改参数，比如目标时间、颜色什么的就能用了。

如果你也喜欢这种可视化的计时效果，可以去看看这些资源：多款漂亮的 HTML5 圆形进度条倒计时动画代码 或者 jQuery html5 圆形进度条倒计时动画特效。也有纯jQuery版的插件，懒得自己写逻辑可以直接用。

，想做个直观又好看的倒计时，这种圆形进度条插件还蛮不错的。别忘了解压包的时候看看是不是缺了啥文件，index.html 一般是预览入口，照着改就行。