本教程将深入探讨如何利用html canvas的上下文变换功能，实现页面元素的动态旋转。我们将重点介绍`save()`、`translate()`、`rotate()`和`restore()`等核心api，通过具体的代码示例演示如何将对象围绕其中心点进行旋转，并提供详细的步骤解析和注意事项，帮助开发者创建更具交互性和视觉吸引力的web应用。
在Web开发中，有时我们需要对页面上的图形或元素进行旋转，以实现特定的视觉效果或交互逻辑。对于使用HTML Canvas绘制的图形，直接旋转整个“画布”通常不是最佳实践，因为这会影响到所有后续绘制操作的坐标系。更常见且灵活的方法是利用Canvas 2D渲染上下文（CanvasRenderingContext2D）提供的变换方法，对单个或一组元素进行局部变换，包括平移、旋转和缩放。
理解 Canvas 变换原理
Canvas的变换操作本质上是修改当前绘图上下文的坐标系。每次进行变换（如平移、旋转、缩放）时，都会在当前坐标系的基础上应用这些变化。这意味着，后续的所有绘制操作都将在这个新的坐标系中进行。为了精确控制每个元素的变换，并避免不同元素之间的变换相互影响，我们需要掌握以下几个关键的上下文方法：
- ctx.save(): 保存当前Canvas上下文的所有状态，包括当前的变换矩阵、填充样式、描边样式、线宽等。这就像在当前状态上打了一个“快照”。
- ctx.translate(x, y): 将Canvas原点（0,0）移动到指定的 (x, y) 位置。所有后续的绘制操作都将相对于这个新的原点进行。
- ctx.rotate(angle): 旋转Canvas坐标系。angle参数以弧度（radians）表示。正值表示顺时针旋转，负值表示逆时针旋转。
- ctx.restore(): 恢复到最近一次 ctx.save() 保存的上下文状态。这会撤销自 save() 以来所有的变换和其他状态修改，确保每次绘制操作都在一个干净或预期的坐标系下进行。
通过 save() 和 restore() 的配合使用，我们可以为每个要旋转的元素创建一个独立的变换作用域，从而实现精确的局部控制，而不会影响到画布上的其他元素。
实战示例：旋转矩形
下面我们将通过一个具体的例子，演示如何在Canvas上绘制一个旋转的矩形。
立即学习“前端免费学习笔记（深入）”；
HTML 结构
首先，在HTML文件中创建一个
Canvas 元素旋转示例
JavaScript 代码
接下来，在 script.js 文件中编写绘制和旋转矩形的逻辑。
function drawRotatedRectangle() {
// 获取 Canvas 元素和 2D 渲染上下文
const canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
console.error("浏览器不支持 Canvas！");
return;
}
const ctx = canvas.getContext("2d");
// 定义矩形的属性
const rectX = 150; // 矩形中心X坐标
const rectY = 100; // 矩形中心Y坐标
const rectWidth = 100; // 矩形宽度
const rectHeight = 60; // 矩形高度
const rotationAngle = Math.PI / 4; // 旋转角度，45度 (弧度)
// 绘制原始（未旋转）的参照矩形
ctx.fillStyle = "blue";
ctx.fillRect(rectX - rectWidth / 2, rectY - rectHeight / 2, rectWidth, rectHeight);
ctx.fillStyle = "black";
ctx.font = "16px Arial";
ctx.textAlign = "center";
ctx.fillText("原始矩形", rectX, rectY + rectHeight / 2 + 20);
// 绘制旋转后的矩形
ctx.save(); // 保存当前上下文状态
// 1. 将原点平移到矩形的中心点
ctx.translate(rectX, rectY);
// 2. 旋转坐标系
ctx.rotate(rotationAngle); // 旋转 45 度
// 3. 在新的坐标系中绘制矩形
// 由于原点已经平移到矩形中心，所以矩形左上角坐标变为 (-width/2, -height/2)
ctx.fillStyle = "red";
ctx.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
// 绘制文本，也将在旋转后的坐标系中
ctx.fillStyle = "white";
ctx.fillText("旋转矩形", 0, 0); // 文本绘制在新的原点 (0,0)
ctx.restore(); // 恢复到保存的上下文状态
// 绘制另一个旋转的矩形
const anotherRectX = 400;
const anotherRectY = 250;
const anotherRectWidth = 80;
const anotherRectHeight = 120;
const anotherRotationAngle = -Math.PI / 6; // 负 30 度
ctx.save();
ctx.translate(anotherRectX, anotherRectY);
ctx.rotate(anotherRotationAngle);
ctx.fillStyle = "green";
ctx.fillRect(anotherRectWidth / -2, anotherRectHeight / -2, anotherRectWidth, anotherRectHeight);
ctx.fillStyle = "white";
ctx.fillText("另一个", 0, 0);
ctx.restore();
}代码解析
- 获取上下文: 首先，我们通过 document.getElementById("myCanvas").getContext("2d") 获取Canvas的2D渲染上下文。
- 定义矩形参数: 设置矩形的中心坐标 (rectX, rectY)、宽度 (rectWidth)、高度 (rectHeight) 和旋转角度 (rotationAngle)。注意，Canvas的 rotate() 方法接受弧度值，所以我们将45度转换为 Math.PI / 4。
- 绘制原始矩形 (参照): 为了对比，我们先绘制一个未旋转的蓝色矩形。这里的 fillRect 坐标是 (rectX - rectWidth / 2, rectY - rectHeight / 2)，确保矩形中心位于 (rectX, rectY)。
- 保存状态: 在进行任何变换之前，调用 ctx.save() 保存当前画布的默认状态。
- 平移原点: ctx.translate(rectX, rectY) 将画布的坐标系原点从 (0,0) 移动到我们希望矩形旋转的中心点 (rectX, rectY)。
- 旋转坐标系: ctx.rotate(rotationAngle) 旋转当前坐标系。现在，任何绘制操作都将在这个新的、已旋转的坐标系中进行。
-
绘制旋转矩形: ctx.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight)。
- 关键点: 因为我们已经将原点平移到了矩形的中心，所以为了使矩形围绕其自身中心旋转，它的左上角坐标在新坐标系中应该是 (-rectWidth / 2, -rectHeight / 2)。这样，矩形的中心就恰好落在新的原点 (0,0) 上。
- 恢复状态: 调用 ctx.restore() 恢复到 ctx.save() 时的状态。这会撤销所有 translate 和 rotate 操作，使后续的绘制（例如第二个旋转矩形或画布上的其他元素）不受影响，继续在默认的坐标系下进行。
- 绘制另一个旋转矩形: 再次演示 save() 和 restore() 的作用，绘制第二个不同位置、不同角度的旋转矩形，说明了每个元素的变换是独立的。
注意事项
- 旋转中心: ctx.rotate() 总是围绕当前坐标系的原点进行旋转。因此，如果你想让一个对象围绕它自己的中心旋转，你需要先使用 ctx.translate() 将坐标系原点移动到该对象的中心。
- 角度单位: ctx.rotate() 接受的参数是弧度（radians），而不是度（degrees）。弧度与度的转换关系是 弧度 = 度 * (Math.PI / 180)。
- 变换顺序: 变换的顺序很重要。通常，对于围绕自身中心旋转的对象，顺序是：save() -> translate(centerX, centerY) -> rotate(angle) -> draw(relativeX, relativeY) -> restore()。
- save() 和 restore() 的重要性: 始终使用 ctx.save() 和 ctx.restore() 来封装一组变换操作。这可以确保每次变换都是局部的，不会影响到画布上的其他元素，也不会累积变换状态，导致难以预测的结果。
- 性能: 对于大量元素的频繁旋转，考虑使用离屏Canvas或Web Workers进行预渲染，以避免阻塞主线程。
总结
通过掌握 ctx.save()、ctx.translate()、ctx.rotate() 和 ctx.restore() 这四个核心API，开发者可以灵活地控制HTML Canvas上图形元素的平移和旋转。这种基于上下文状态管理的变换机制，使得在Canvas上创建复杂的动态视觉效果变得既强大又可控。理解并正确运用这些方法，是构建高性能、交互式Web图形应用的关键一步。
