HTML5 Canvas 中旋转单个矩形的实用教程-html教程-PHP中文网

HTML5 Canvas 中旋转单个矩形的实用教程

心靈之曲

发布： 2025-10-12 10:11:11

原创

625人浏览过

HTML5 Canvas 中旋转单个矩形的实用教程

本教程详细阐述了在 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 度，而其他红色矩形保持不变。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

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 应用和游戏的基础。

以上就是HTML5 Canvas 中旋转单个矩形的实用教程的详细内容，更多请关注php中文网其它相关文章！