当你需要在 HTML5 画布中旋转单个对象时，你需要使用 Canvas 2D API 中的 rotate() 方法。
1. 创建 Canvas
首先，创建一个 HTML5 画布并获取其上下文：
------- -----------------------
----- ------ - ------------------------------------ ----- --- - ------------------------
2. 绘制图形
接下来，在画布上绘制一个需要旋转的图形。这里以绘制一个矩形为例：
------------- - ------ ---------------- --- ---- ----
3. 旋转图形
为了旋转这个矩形，我们可以使用 rotate() 方法。它会将画布沿着当前绘图位置和角度旋转一定的弧度。
----- ------- - ---- -- ------- ----- ------- - --- ----- -------------- - ------- - -- -- --------- ---- ---------------------- --------- -- ----------- --------------------------- -- ---- ----------------------- ---------- -- -------- ------------- - ------ ---------------- --- ---- ----
注意事项：
- 在执行旋转操作之前，必须使用
translate()方法将当前原点移动到旋转中心点。 - 旋转操作完成后，必须再次使用
translate()方法将原点还原回初始位置。
示例代码
下面是完整的示例代码：
------- -----------------------
----- ------ - ------------------------------------ ----- --- - ------------------------ -- ---- ------------- - ------ ---------------- --- ---- ---- -- ------------- ----- ------- - ---- ----- ------- - --- ----- -------------- - ------- - -- -- --------- ---------------------- --------- --------------------------- ----------------------- ---------- ------------- - ------ ---------------- --- ---- ----
结论
在 HTML5 画布上旋转单个对象可以通过 Canvas 2D API 中的 rotate() 方法实现。需要注意的是，在执行旋转操作之前，必须使用 translate() 方法将当前原点移动到旋转中心点，并在旋转操作完成后，使用 translate() 方法将原点还原回初始位置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29325