如何在HTML5 Canvas中旋转单个矩形

在HTML5 Canvas的绘图场景中，经常需要实现单个图形的独立旋转，比如只让画布中的一个矩形旋转，而不影响其他已经绘制或者后续要绘制的元素。很多新手直接使用rotate方法后发现整个画布都发生了旋转，这就是没有掌握Canvas状态管理的结果。下面我们就一步步讲解如何实现单个矩形的旋转。

核心原理说明

Canvas的绘图上下文（context）维护着一套变换状态，包括平移、旋转、缩放等参数。如果直接调用rotate()方法，会改变整个上下文的变换矩阵，所有后续绘制的图形都会应用这个旋转。要实现单个矩形旋转，需要用到三个关键操作：

• 使用save()保存当前的上下文状态，避免旋转操作影响其他元素
• 通过translate()将画布原点移动到矩形的旋转中心，再调用rotate()执行旋转
• 绘制矩形后，使用restore()恢复之前的上下文状态，重置变换参数

基础实现步骤

1. 创建Canvas画布

首先在HTML中创建一个Canvas元素，并获取它的2D绘图上下文：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
</script>

2. 绘制普通矩形作为参照

先绘制一个普通的矩形，用来对比后续旋转矩形的效果，这个矩形不会受到旋转操作的影响：

// 绘制参照矩形，位置在(50,50)，宽100，高60
ctx.fillStyle = '#e0e0e0';
ctx.fillRect(50, 50, 100, 60);

3. 实现单个矩形旋转

接下来绘制需要旋转的矩形，假设我们要让矩形绕自身中心旋转30度，完整代码如下：

// 定义旋转矩形的参数
const rectX = 200; // 矩形左上角x坐标
const rectY = 200; // 矩形左上角y坐标
const rectW = 100; // 矩形宽度
const rectH = 60;  // 矩形高度
const rotateAngle = 30 * Math.PI / 180; // 旋转角度，转为弧度制

// 保存当前上下文状态
ctx.save();

// 将画布原点平移到矩形中心
ctx.translate(rectX + rectW / 2, rectY + rectH / 2);

// 执行旋转操作
ctx.rotate(rotateAngle);

// 绘制矩形，此时坐标原点在矩形中心，所以绘制位置要调整为负的宽高一半
ctx.fillStyle = '#4CAF50';
ctx.fillRect(-rectW / 2, -rectH / 2, rectW, rectH);

// 恢复上下文状态，后续绘制不受影响
ctx.restore();

4. 验证效果

再绘制一个普通矩形，确认它没有被旋转：

// 绘制另一个参照矩形，验证旋转没有全局生效
ctx.fillStyle = '#f44336';
ctx.fillRect(50, 300, 100, 60);

常见问题说明

旋转角度的计算

rotate()方法接收的参数是弧度值，而不是角度值，所以需要把角度乘以Math.PI / 180转换为弧度。如果需要持续旋转矩形，可以在动画循环中不断更新旋转角度，每次绘制前都执行save、平移、旋转、绘制、restore的流程。

旋转中心调整

默认旋转是围绕当前原点进行的，所以如果不使用translate调整原点，旋转会围绕画布左上角（初始原点）进行。如果需要围绕矩形的某个特定点旋转，只需要修改translate的目标坐标即可，比如要围绕矩形左上角旋转，就平移到(rectX, rectY)。

完整示例代码

把上面的代码整合起来，就是一个完整的单个矩形旋转示例：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制参照矩形1
  ctx.fillStyle = '#e0e0e0';
  ctx.fillRect(50, 50, 100, 60);

  // 旋转矩形参数
  const rectX = 200;
  const rectY = 200;
  const rectW = 100;
  const rectH = 60;
  const rotateAngle = 30 * Math.PI / 180;

  ctx.save();
  ctx.translate(rectX + rectW / 2, rectY + rectH / 2);
  ctx.rotate(rotateAngle);
  ctx.fillStyle = '#4CAF50';
  ctx.fillRect(-rectW / 2, -rectH / 2, rectW, rectH);
  ctx.restore();

  // 绘制参照矩形2
  ctx.fillStyle = '#f44336';
  ctx.fillRect(50, 300, 100, 60);
</script>

通过上面的方法，就可以轻松实现HTML5 Canvas中单个矩形的独立旋转，不会干扰其他图形的绘制，这个思路也适用于其他图形的单独变换操作。

HTML5_Canvas矩形旋转transformrotatesave_restore修改时间：2026-05-26 19:51:34