HTML5CSS3实现日食动画效果

动画节奏可以用setInterval控制，也可以直接 CSS 写animation。想要点交互？加个按钮监听个click事件就搞定，控制动画开始或暂停。整个过程，既能练 canvas 绘图，也能练 CSS 动画，是个比较全面的小项目。

但要注意哦，性能优化蛮重要，canvas 频繁重绘会掉帧。建议先判断再绘制，避免重复画一样的图。兼容性方面，现在浏览器基本都支持，不过老版本还是要注意回退方案。

如果你想把动画和知识点结合做点有意思的东西，这个日食动画就是个不错的练手例子。还能拿去教学，给小朋友讲讲为啥会发生日食，视觉冲击力也强。