Canvas如何单独旋转单个对象/路径而非旋转整个绘制区域？

云上老周

2026-10-4

实现单个路径独立旋转的方案

你当前的问题根源是直接修改了全局Canvas上下文的变换矩阵后绘制所有元素，导致所有元素都被旋转。只需用save()和restore()包裹单个元素的变换、绘制逻辑，即可实现变换仅作用于单个对象，具体修改如下：

1. 简化旋转触发逻辑

不需要单独的drawRotated方法，修改选中对象的旋转角度后直接全局重绘即可：

$('.rotate').on('input', function() {
    data.rotate += 1;
    drawAllShips();
});

2. 重写`drawAllShips`方法，单元素独立处理变换

核心逻辑是每个元素绘制前单独保存上下文状态，完成自身变换、绘制后恢复状态，避免变换影响其他元素：

function drawAllShips() {
    // 清空整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ships.forEach(ship => {
        // 保存当前上下文的所有状态（变换矩阵、填充/描边样式等）
        ctx.save();
        
        // 仅对当前ship做旋转变换
        const cx = ship.x + 0.5 * ship.width;
        const cy = ship.y + 0.5 * ship.height;
        ctx.translate(cx, cy);
        ctx.rotate(ship.rotate * Math.PI / 180);
        ctx.translate(-cx, -cy);
        
        // 这里替换为你原本绘制单个ship的逻辑：定义路径、填充、描边等
        ctx.fillStyle = ship.fill;
        ctx.fillRect(ship.x, ship.y, ship.width, ship.height);
        // 你原有绘制ship附属元素（b1、b2相关部件）的逻辑也放在这里
        
        // 恢复上下文到save之前的状态，后续元素不受本次变换影响
        ctx.restore();
    });
}