CanvasRenderingContext2D：rotate() 方法

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自 2015年7月.

报告反馈

语法

Canvas 2D API 的CanvasRenderingContext2D.rotate()方法会向变换矩阵添加旋转。
rotate(angle)

Rectangular coordinate system with the rotation of the abscissa axis by the alpha angle

参数

angle

以弧度表示的顺时针旋转角度。可以使用degree * Math.PI / 180从度数计算弧度。

旋转中心点始终是画布原点。若要更改中心点，需要使用translate()方法移动画布。

返回值

无（undefined）。

示例

旋转形状

此示例将矩形旋转 45°。请注意，旋转中心是画布的左上角，而不是相对于任何形状的位置。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

Canvas 2D API 的CanvasRenderingContext2D.rotate()方法会向变换矩阵添加旋转。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Point of transform origin
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20);

// Rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

// Reset transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

结果

旋转中心为蓝色。未旋转的矩形为灰色，旋转的矩形为红色。

围绕其中心旋转形状

此示例围绕其中心点旋转形状。为此，将以下步骤应用于矩阵

  1. 首先，translate()将矩阵的原点移动到形状的中心。
  2. rotate()按所需量旋转矩阵。
  3. 最后，translate()将矩阵的原点移回其起始点。这是通过以负方向应用形状中心坐标的值来完成的。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

该形状是一个矩形，其角位于 (80, 60)，宽度为 140，高度为 30。其水平中心位于 (80 + 140 / 2)，即 150。其垂直中心位于 (60 + 30 / 2)，即 75。因此，中心点位于 (150, 75)。

Canvas 2D API 的CanvasRenderingContext2D.rotate()方法会向变换矩阵添加旋转。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(80, 60, 140, 30);

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// Rotated rectangle
ctx.fillStyle = "red";
ctx.fillRect(80, 60, 140, 30);

结果

未旋转的矩形为灰色，旋转的矩形为红色。

规范

规范
HTML 标准
# dom-context-2d-rotate-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅