本教程详细介绍了如何使用JavaScript的HTML Canvas API实现图形元素的旋转。我们将深入探讨Canvas上下文的保存与恢复、坐标系的平移与旋转等核心变换操作，并通过具体代码示例演示如何围绕元素中心进行旋转，以及如何将这些技术应用于图像和文本，帮助开发者高效地在Canvas上创建动态视觉效果。
理解Canvas变换基础
HTML Canvas是一个强大的绘图API，它允许开发者通过JavaScript在网页上绘制图形。与直接操作DOM元素不同，Canvas上的所有绘制都是基于像素的。要实现元素的旋转、缩放或移动，我们通常需要对Canvas的坐标系进行变换，而不是直接修改元素的属性。
Canvas提供了以下几个核心的变换方法：
- ctx.save(): 保存当前Canvas的绘图状态（包括当前的变换矩阵、填充样式、描边样式等）。
- ctx.restore(): 恢复到最近一次保存的Canvas状态。这对于隔离不同元素的变换非常重要。
- ctx.translate(x, y): 将Canvas的坐标原点移动到(x, y)。所有后续的绘制操作都将相对于这个新的原点进行。
- ctx.rotate(angle): 旋转Canvas的坐标系。angle参数以弧度表示。所有后续的绘制操作都将相对于这个旋转后的坐标系进行。
- ctx.scale(x, y): 缩放Canvas的坐标系。x和y是水平和垂直方向的缩放因子。
实现单个元素的旋转
要实现一个元素的旋转，关键在于结合save()、translate()、rotate()和restore()。一个常见的需求是让元素围绕其自身中心旋转，而不是Canvas的默认原点(0,0)。
立即学习“Java免费学习笔记（深入）”；
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
示例代码：旋转一个矩形
以下是一个在Canvas上绘制并旋转一个矩形的完整示例：
HTML 结构 (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Canvas 元素旋转示例</title>
<style>
body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }
canvas { border: 1px solid #ccc; background-color: #fff; }
</style>
</head>
<body onload="drawRotatedRectangle()">
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
function drawRotatedRectangle() {
const canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
console.error("您的浏览器不支持Canvas！");
return;
}
const ctx = canvas.getContext("2d");
// 定义矩形的基本属性
const xCenter = canvas.width / 2; // 矩形中心X坐标
const yCenter = canvas.height / 2; // 矩形中心Y坐标
const width = 100; // 矩形宽度
const height = 60; // 矩形高度
const rotationAngle = Math.PI / 4; // 旋转角度，45度 (π/4 弧度)
// 1. 保存当前Canvas状态
ctx.save();
// 2. 将Canvas原点平移到矩形的中心
ctx.translate(xCenter, yCenter);
// 3. 旋转Canvas坐标系
ctx.rotate(rotationAngle);
// 4. 绘制矩形
// 注意：由于原点已平移到矩形中心，绘制时矩形的左上角应为 (-width/2, -height/2)
ctx.fillStyle = "red";
ctx.fillRect(-width / 2, -height / 2, width, height);
// 5. 恢复到之前保存的Canvas状态
// 这确保了后续的绘制操作不会受到当前旋转和平移的影响
ctx.restore();
// 可以在此处绘制其他不受影响的元素，例如一个未旋转的文本
ctx.fillStyle = "blue";
ctx.font = "20px Arial";
ctx.fillText("未旋转的文本", 10, 30);
}
</script>
</body>
</html>代码解析
- 获取Canvas上下文: const ctx = canvas.getContext("2d"); 获取2D绘图上下文，这是所有Canvas操作的入口。
- ctx.save(): 在进行任何变换之前调用save()，保存Canvas的当前状态。这就像在变换前拍了一张快照，允许我们之后回到这个状态。
- ctx.translate(xCenter, yCenter): 将Canvas的坐标原点移动到我们希望旋转的中心点。在这个例子中，我们将原点移到了矩形的中心位置。这样做的目的是，当rotate()方法被调用时，它会围绕当前原点进行旋转，从而使矩形围绕自身中心旋转。
- ctx.rotate(rotationAngle): 旋转Canvas的整个坐标系。rotationAngle是弧度值。例如，Math.PI / 4 等于45度。
- ctx.fillRect(-width / 2, -height / 2, width, height): 绘制矩形。由于我们已经将坐标原点平移到了矩形的中心，所以矩形的左上角坐标变成了 (-width / 2, -height / 2)。这样，矩形就会以新的原点为中心进行绘制。
- ctx.restore(): 在完成元素的绘制和变换后，调用restore()将Canvas状态恢复到save()时的状态。这会撤销所有在save()和restore()之间进行的变换操作，确保后续绘制的其他元素不会受到之前变换的影响。
旋转其他Canvas元素
同样的原理也适用于Canvas上的其他绘制操作，例如图像和文本。只需在translate()和rotate()之后，调用相应的绘制方法即可：
- 旋转图像: 加载图像后，使用ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height); 来绘制图像。
- 旋转文本: 使用ctx.fillText(text, 0, 0); 或 ctx.strokeText(text, 0, 0); 来绘制文本。需要注意的是，fillText的坐标 (0,0) 在变换后将是文本的基线中心点。
旋转整个Canvas“屏幕”
如果你的需求是旋转Canvas上绘制的所有内容，使其作为一个整体旋转，那么你可以在每次绘制帧的开始阶段，对整个Canvas应用一次全局变换。
例如，在一个动画循环中：
function animate() {
requestAnimationFrame(animate); // 持续动画
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个Canvas
// 假设你有一个全局的旋转角度和旋转中心
const globalRotationAngle = Date.now() / 1000 * (Math.PI / 10); // 随时间旋转
const rotationCenterX = canvas.width / 2;
const rotationCenterY = canvas.height / 2;
ctx.save(); // 保存初始状态
// 将原点移到全局旋转中心
ctx.translate(rotationCenterX, rotationCenterY);
// 旋转整个Canvas坐标系
ctx.rotate(globalRotationAngle);
// 移回原点（因为所有后续绘制都将相对于这个旋转后的中心）
// 注意：这里的平移是针对旋转后的坐标系，因此实际上是将绘制内容移回其在旋转前的相对位置
ctx.translate(-rotationCenterX, -rotationCenterY);
// 在这里绘制所有需要旋转的元素
// 例如，一个矩形
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 80, 40 
