canvas旋转绘制的元素

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

const x = 100; // 矩形左上角的 x 坐标

const y = 100; // 矩形左上角的 y 坐标

const width = 200; // 矩形的宽度

const height = 100; // 矩形的高度

const rotationAngle = 30; // 旋转角度

// 绘制未旋转的矩形

ctx.fillStyle = "blue";

ctx.fillRect(x, y, width, height);

// 旋转画布

ctx.translate(x + width / 2, y + height / 2);

ctx.rotate((rotationAngle * Math.PI) / 180); // 将角度转为弧度

ctx.translate(-x - width / 2, -y - height / 2);

// 绘制旋转后的矩形

ctx.fillStyle = "red";

ctx.fillRect(x, y, width, height);

 

首先使用ctx.fillRect()方法绘制了一个蓝色的矩形未旋转，该矩形的左上角坐标为(x, y)，宽度为width，高度为height。

实现旋转的步骤：

1、使用ctx.translate()将画布的原点移动到矩形的中心位置。

2、调用ctx.rotate()方法将画布旋转了30度，弧度(rotationAngle * Math.PI) / 180。

3、再次使用ctx.translate()将画布的原点移回初始位置。

通过旋转画布，在旋转后的状态下绘制了一个红色的矩形。