本教程详细阐述了在 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 应用和游戏的基础。
以上就是HTML5 Canvas 中旋转单个矩形的实用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583640.html
微信扫一扫 
支付宝扫一扫 
