HTML 画布 rotate() 方法

在 HTML 文档中，可以使用画布（Canvas）元素绘制图形。画布提供了一组 API 来操作图形对象，其中包括 rotate() 方法，可以使图形对象在画布上旋转一定的角度。

语法

rotate(angle)

参数 angle 表示旋转角度，单位为弧度（radians）。正值表示顺时针旋转，负值表示逆时针旋转。

使用示例

以下示例代码展示如何在画布上绘制一个矩形，并将其顺时针旋转 45 度：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 50);

  // 顺时针旋转 45 度
  const angle = Math.PI / 4; // 角度转弧度
  ctx.rotate(angle);

  // 绘制旋转后的矩形
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, -25, 100, 50);
</script>

运行代码可以看到，绘制的矩形被顺时针旋转了 45 度，并绘制了一个蓝色的旋转后的矩形。

注意事项

• rotate() 方法旋转的是画布上的所有图形对象，而非单个图形对象。
• 调用 rotate() 方法后，后续绘制的图形对象都将受到旋转的影响，可以通过调用 rotate(-angle) 将画布恢复到原始状态。
• 旋转角度的取值范围为 [-∞, ∞]，但通常只需要在 [0, 2π) 范围内即可，可以通过 Math.PI 常量将角度转为弧度。

总结

rotate() 方法是 HTML 画布提供的重要 API 之一，在绘制需要旋转的图形时非常有用，程序员在实际开发中应该熟练掌握该方法的使用。