本教程详细讲解如何利用javascript canvas 2d上下文的变换功能，如translate、rotate、save和restore，实现页面元素的旋转与整体视图的灵活控制。通过改变绘图坐标系，开发者可以轻松地旋转图像、文本等内容，模拟“屏幕”旋转效果，为交互式web应用提供强大的视觉表现力。
1. 理解Canvas 2D上下文变换
当我们在HTML canvas元素上绘图时，实际上是在操作其2D渲染上下文（CanvasRenderingContext2D）。这个上下文维护着一个当前的变换矩阵，它决定了所有后续绘图操作的坐标系。通过修改这个矩阵，我们可以实现平移（translate）、旋转（rotate）、缩放（scale）等效果，而无需手动计算每个元素的最终坐标。这对于实现复杂的图形布局和动画效果至关重要，尤其是在需要模拟整个“屏幕”或特定区域旋转的场景下。
2. 核心变换方法
Canvas 2D上下文提供了一系列方法来操作其变换矩阵：
- ctx.save(): 保存当前上下文的状态，包括当前的变换矩阵、填充样式、描边样式等所有绘图属性。这在执行一系列临时变换之前非常有用，以便之后可以恢复到之前的状态。
- ctx.translate(x, y): 将当前坐标系的原点移动到(x, y)。这意味着所有后续的绘图操作都将相对于这个新原点进行。例如，ctx.fillRect(0, 0, w, h) 在 translate(x, y) 之后，实际上会在屏幕的 (x, y) 位置绘制矩形。
- ctx.rotate(angle): 旋转当前坐标系。angle参数以弧度表示。正值表示顺时针旋转，负值表示逆时针旋转。旋转是围绕当前坐标系的原点进行的。
- ctx.restore(): 恢复到最近一次 ctx.save() 所保存的上下文状态。这会撤销所有在 save() 和 restore() 之间进行的变换和属性更改。
3. 实践：旋转画布上的元素
下面是一个具体的示例，展示如何在一个Canvas上绘制一个旋转的矩形。我们将利用 translate 将矩形移动到指定位置，然后利用 rotate 使其围绕自身中心旋转。
HTML结构
首先，在HTML中创建一个canvas元素，并设置onload事件来初始化绘图：
立即学习“Java免费学习笔记（深入）”；
<!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="initCanvas()">
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
function initCanvas() {
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const xCenter = 300; // 矩形中心X坐标
const yCenter = 200; // 矩形中心Y坐标
const height = 60; // 矩形高度
const width = 100; // 矩形宽度
const rotationAngle = 45 * Math.PI / 180; // 旋转角度，转换为弧度 (45度)
// 绘制第一个未旋转的矩形作为参考
ctx.fillStyle = "blue";
ctx.fillRect(xCenter - width / 2, yCenter - height / 2, width, height);
ctx.font = "16px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("未旋转", xCenter, yCenter + height / 2 + 20);
// 保存当前上下文状态
ctx.save();
// 将坐标原点移动到矩形的中心
ctx.translate(xCenter, yCenter);
// 旋转坐标系
ctx.rotate(rotationAngle);
// 设置填充颜色
ctx.fillStyle = "red";
// 在新的坐标系中绘制矩形。
// 由于原点已移动到矩形中心，所以矩形的左上角应为 (-width/2, -height/2)
ctx.fillRect(width / -2, height / -2, width, height);
ctx.fillText("已旋转", 0, height / 2 + 20); // 在旋转后的坐标系原点绘制文本
// 恢复到之前保存的上下文状态，撤销translate和rotate
ctx.restore();
// 恢复后，可以继续在原始坐标系中绘制其他内容
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 80, 40);
ctx.fillText("原始坐标系", 90, 110);
}
</script>
</body>
</html>代码解析
- canvas.getContext("2d"): 获取2D渲染上下文对象。
- ctx.save(): 在进行任何变换之前，保存当前的绘图状态。这允许我们在完成特定元素的绘制后，轻松地恢复到原始状态，避免影响后续的绘图。
- ctx.translate(xCenter, yCenter): 将画布的绘图原点移动到我们希望矩形中心所在的 (xCenter, yCenter) 位置。
- ctx.rotate(rotationAngle): 围绕当前原点（即 (xCenter, yCenter)）旋转坐标系。rotationAngle 需要是弧度值，通常将角度乘以 Math.PI / 180 进行转换。
- ctx.fillRect(width / -2, height / -2, width, height): 在旋转和平移后的新坐标系中绘制矩形。由于原点现在位于矩形的中心，所以矩形的左上角坐标需要设置为 (-width/2, -height/2)，这样矩形才能以其中心为轴进行旋转。
- ctx.restore(): 恢复到 ctx.save() 时的状态。这会撤销 translate 和 rotate 操作，使后续的绘图回到原始的坐标系。
4. 整体视图旋转与注意事项
如果目标是旋转“整个屏幕”或Canvas上的所有内容，而不仅仅是单个元素，那么可以在绘制所有内容之前，对整个Canvas的上下文应用一次 translate 和 rotate。
function rotateWholeCanvasContent() {
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const rotationAngle = 15 * Math.PI / 180; // 旋转15度
ctx.save(); // 保存原始状态
// 将原点移动到画布中心，以便围绕中心旋转
ctx.translate(centerX, centerY);
// 旋转整个坐标系
ctx.rotate(rotationAngle);
// 将原点移回左上角，但现在是旋转后的左上角
ctx.translate(-centerX, -centerY);
// 在这个旋转后的坐标系中绘制所有内容
// 绘制一个图片
const img = new Image();
img.src = 'https://via.placeholder.com/100x75/0000FF/FFFFFF?text=Image'; // 示例图片路径
img.onload = () => {
ctx.drawImage(img, 50, 50, 100, 75); // 绘制图片
ctx.fillStyle = "purple";
ctx.font = "24px Arial";
ctx.fillText(" 
