如何在 canvas 上旋转某个对象？

在HTML的<canvas>元素中，如果我们想要旋转一个对象，通常会使用Canvas 2D API中的rotate()函数。这个函数可以通过旋转画布上的坐标系统来实现对对象的旋转。下面是一个具体的步骤说明和示例：

步骤

1. 获取Canvas上下文: 首先，我们需要获取canvas元素的2D渲染上下文，这样才能调用绘图函数。

2. 保存当前的画布状态: 使用save()方法保存当前画布的状态（包括之前的变换信息），这样我们可以在之后的操作中恢复到当前状态。

3. 定位到对象的中心: 使用translate()方法将画布的原点移动到你想要旋转对象的中心点。这是因为默认情况下，旋转是围绕原点进行的。

4. 执行旋转操作: 调用rotate()方法并传入旋转角度（以弧度为单位）。如果需要使用度数，可以通过角度 * Math.PI / 180来转换为弧度。

5. 绘制对象: 在旋转后的坐标系统中绘制你的对象。由于已经移动了坐标系统的原点，你可能需要调整对象的位置。

6. 恢复画布状态: 完成绘制后，调用restore()方法恢复到之前保存的画布状态，以取消之前的旋转和位移。

示例代码

javascript
function drawRotatedRect(canvas, angle, rectX, rectY, rectWidth, rectHeight) {
    const ctx = canvas.getContext('2d');
    
    // 保存当前状态
    ctx.save();
    
    // 移动到矩形中心
    ctx.translate(rectX + rectWidth / 2, rectY + rectHeight / 2);
    
    // 旋转画布
    ctx.rotate(angle * Math.PI / 180);
    
    // 绘制矩形（此时的坐标系统已经被旋转和位移）
    ctx.fillStyle = 'blue';
    ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
    
    // 恢复到旋转前的状态
    ctx.restore();
}

// 用法示例
const canvas = document.getElementById('myCanvas');
drawRotatedRect(canvas, 45, 100, 100, 100, 50);

在这个例子中，一个矩形在画布上以其中心为旋转中心被旋转了45度。首先，我们通过translate()移动画布的原点到矩形中心，然后通过rotate()旋转画布，接着绘制矩形，并在绘制完毕后恢复画布状态。这样可以保证画布的其它元素不受影响。