HTML5Canvas旋转动画效果
canvas 的图形围绕旋转效果，用起来挺灵活，适合做一些动效交互，比如转盘抽奖、加载动画什么的。核心方法就仨：translate()、rotate()和drawImage()（或者fillRect()之类的）。逻辑也不复杂，先把原点挪到图形中心，再旋转，再画，恢复状态，思路清晰。
HTML5 的canvas挺强大，想玩转旋转动画，关键是搞清楚坐标轴的变化。尤其translate()这步，容易忽略但重要。如果直接旋转，图形飞哪儿去了你都不知道。嗯，用context.save()和context.restore()把状态包起来，修改起来也方便。
像做转盘时，每次只要把角度+1（或别的增量），setInterval()不停画，就能搞出个还不错的转动动画。你甚至可以叠加点shadowBlur或者颜色渐变，让整个旋转过程更有质感。效果炫，代码却不复杂。
如果你对canvas不太熟，可以先看下基本用法，比如canvas 画板，基础操作讲得挺清楚。之后再回来看这个围绕旋转，会更有感觉。
，想在前端玩点花样的，绕中心点转动这种技术挺值得掌握。尤其做可视化、图形操作时，能省不少事。你甚至能用它去控制小地图、雷达动画，想象空间挺大。
如果你还想研究动画扩展，可以顺带看看全屏 Canvas 动画，也挺有意思的。
文件大小：87.84KB
评论区