HTML5Canvas神奇宝贝球Loading加载动画

神奇宝贝球造型的 Loading 加载动画，用 HTML5 Canvas 搞的，视觉效果还挺抓眼的。整个动画就像一颗正在“充能”的精灵球，进度环绕着球体缓缓旋转，看着就有动感。Canvas 画图嘛，主要靠一堆arc()、fillStyle、beginPath()这些 API，绘图流程也不算复杂，搞清楚基本语法就能上手。

Loading 的部分挺巧妙，思路就是一个动态更新的角度值配合requestAnimationFrame()搞定进度动画，响应也快，不卡顿。想让动画显得更“顺滑”，记得控制好帧率，变量更新别太猛。整个动画封装得比较清爽，JS 代码和 Canvas 画布分得清楚，调试起来也方便。

如果你想做一个有趣点儿的加载提示，又不想用千篇一律的转圈圈，这个挺合适。里面的texiao1503_1560680967压缩包里有完整代码，index.html一跑就能看效果，修改颜色、大小、加载速度也灵活。赶项目的时候拿来做个视觉加分的小组件，效果还挺不错的。

另外，顺手推荐几个类似的 Canvas 特效，想玩点动画的朋友可以一起看下：球内波浪动画、球形烟花、还有一个加载特效合集，都蛮有意思的。

如果你刚入门 Canvas，建议先练习用arc()画图形，再慢慢加上requestAnimationFrame()做动画，理解了这俩配合，基本能写出多酷炫效果。