本教程详细阐述了在 html5 canvas 中如何精确地旋转单个图形对象，而不影响画布上其他元素的绘制。核心技术在于利用 `ctx.save()` 和 `ctx.restore()` 方法来管理绘图状态，结合 `ctx.rotate()` 进行旋转，以及 `ctx.translate()` 来调整旋转中心，实现围绕对象自身中心旋转的精细控制。
在 HTML5 Canvas 中进行图形绘制时，我们经常需要对特定对象应用变换，例如旋转、缩放或平移。然而，Canvas 的变换操作是全局性的，这意味着一旦应用了 ctx.rotate()，后续所有的绘图操作都会受到影响。为了实现对单个元素进行局部变换，同时保持其他元素不受干扰，我们需要巧妙地利用 Canvas 的状态管理机制。
Canvas 变换基础
Canvas 2D 渲染上下文（CanvasRenderingContext2D）提供了一系列方法来改变坐标系：
- ctx.rotate(angle): 旋转当前坐标系。angle 参数以弧度表示。
- ctx.translate(x, y): 平移当前坐标系原点到 (x, y)。
- ctx.scale(x, y): 缩放当前坐标系。
- ctx.transform(a, b, c, d, e, f): 直接应用一个矩阵变换。
这些变换会累积，并影响所有后续的绘图操作。
局部变换的核心：状态保存与恢复
为了只对特定绘图操作应用变换，我们必须使用 ctx.save() 和 ctx.restore() 方法。
立即学习“前端免费学习笔记（深入）”；
- ctx.save(): 将当前 Canvas 的完整状态（包括当前的变换矩阵、填充样式、描边样式等）推入一个栈中。
- ctx.restore(): 从栈中弹出最近保存的状态，并将其恢复为当前状态。
通过在应用变换之前调用 ctx.save()，并在完成受变换影响的绘图操作之后调用 ctx.restore()，我们可以确保变换只在 save() 和 restore() 之间的代码块中生效，从而实现局部变换。
示例一：围绕 Canvas 原点 (0,0) 旋转
假设我们想让一个蓝色矩形围绕 Canvas 的左上角 (0,0) 旋转 30 度，而其他红色矩形保持不变。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// 设置 Canvas 尺寸为全屏
canvas.width = innerWidth;
canvas.height = innerHeight;
// 绘制需要旋转的蓝色矩形
ctx.save(); // 保存当前 Canvas 状态
ctx.rotate(Math.PI / 6); // 旋转 30 度 (π/6 弧度)
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width / 3, canvas.height / 3);
ctx.restore(); // 恢复之前保存的 Canvas 状态，撤销旋转变换
// 绘制其他红色矩形，它们不受蓝色矩形旋转的影响
ctx.fillStyle = "red";
ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3, canvas.height / 3);
ctx.fillRect(canvas.width * 2 / 3, canvas.height * 2 / 3, canvas.width / 3, canvas.height / 3);在上述代码中，ctx.save() 和 ctx.restore() 确保了 ctx.rotate() 只作用于蓝色矩形的 fillRect 操作。一旦 ctx.restore() 被调用，Canvas 的坐标系就会回到旋转之前的状态，因此后续绘制的红色矩形不会被旋转。
示例二：围绕矩形自身中心旋转
通常，我们希望对象围绕其自身的中心点旋转，而不是 Canvas 的原点。这需要结合 ctx.translate() 方法来改变坐标系的原点。
要实现围绕对象中心旋转，一般步骤如下：
- 保存 Canvas 状态 (ctx.save())。
- 将坐标系原点平移到对象的中心点 (ctx.translate(centerX, centerY))。
- 应用旋转 (ctx.rotate(angle))。
- 在新的（已平移和旋转的）坐标系中绘制对象。由于原点现在是对象的中心，所以对象的绘制坐标应该相对于这个新原点，通常是 (-width/2, -height/2)。
- 恢复 Canvas 状态 (ctx.restore())。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
ctx.save(); // 保存当前 Canvas 状态
const w = canvas.width / 3; // 矩形宽度
const h = canvas.height / 3; // 矩形高度
// 将坐标系原点平移到蓝色矩形的中心
// 初始矩形左上角在 (0,0)，其中心在 (w/2, h/2)
ctx.translate(w / 2, h / 2);
ctx.rotate(Math.PI / 6); // 旋转 30 度
ctx.fillStyle = "blue";
// 在新的坐标系中绘制矩形。由于原点已移至矩形中心，
// 矩形的左上角变为 (-w/2, -h/2)
ctx.fillRect(-w / 2, -h / 2, w, h);
ctx.restore(); // 恢复之前保存的 Canvas 状态
// 绘制其他红色矩形，它们不受影响
ctx.fillStyle = "red";
ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3, canvas.height / 3);
ctx.fillRect(canvas.width * 2 / 3, canvas.height * 2 / 3, canvas.width / 3, canvas.height / 3);通过 ctx.translate(w / 2, h / 2)，我们将绘图原点移动到了蓝色矩形的中心。然后，所有的旋转操作都将围绕这个新的原点进行。绘制矩形时，其左上角坐标变为 (-w/2, -h/2)，这样矩形的中心就恰好落在新的原点上。
注意事项与最佳实践
- save() 和 restore() 必须成对出现： 每次调用 save() 都应该有相应的 restore()。忘记 restore() 会导致后续所有绘图操作都受到意想不到的变换影响。
- 变换顺序： 对于围绕对象中心旋转，变换的顺序通常是 translate -> rotate -> scale。如果顺序颠倒，结果可能会不同。例如，先旋转再平移会导致平移方向也跟着旋转。
- 角度单位： ctx.rotate() 接受的参数是弧度，而不是度数。常用的转换公式是 度数 * (Math.PI / 180)。
- 性能考量： 频繁的 save() 和 restore() 操作会带来轻微的性能开销，但在大多数场景下，这种开销是可接受的，并且是实现局部变换的必要手段。
总结
在 HTML5 Canvas 中实现单个图形的局部旋转，关键在于理解和正确运用 ctx.save() 和 ctx.restore() 来管理绘图状态。结合 ctx.rotate() 进行旋转，以及 ctx.translate() 来精确控制旋转中心，开发者可以灵活地对 Canvas 上的特定元素应用复杂的变换，同时保持画布的整体一致性。掌握这些技术是构建交互式 Canvas 应用和游戏的基础。
