如何实现JavaScript图片旋转效果的高级技巧？

本文共计1958个文字，预计阅读时间需要8分钟。

在Canvas API中，上下文对象CanvasRenderingContext2D提供了rotate方法，用于实现与坐标旋转相关的功能：`void rotate(float angle);` 该方法按照指定的角度顺时针旋转当前坐标系统。旋转的中心是canvas的原点，即左上角的位置。例如，`rotate(angle)`方法会旋转angle度。

在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：

void rotate(in float angle); // 按给定的弧度顺时针旋转angle

rotate（）方法旋转的中心始终是canvas的原点。如果要改变旋转中心，需要使用translate方法。

我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。

1．旋转的扇叶

将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶图案。将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的扇叶动画。

编写如下的HTML代码。