javascript - 在 Canvas 上绘制旋转的元素

Question

我想在旋转的 Canvas 上绘制一个半复杂元素而不旋转 Canvas ，这样我就不需要计算元素的所有各个 x/y 点。

我认为我需要使用的基本流程是:

• 将 0,0 点平移到绘制元素将围绕其旋转的点，
• 旋转 Canvas ，
• 绘制元素，
• 向后旋转 Canvas ，
• 恢复原点。

我需要多次这样做。我读到旋转/向后旋转部分可能会引入一些错误，最终图像会稍微偏离一点。有办法避免这种情况吗？

Answer 1

在执行旋转和平移之前，调用context.save()。这将创建 Canvas 当前变换的快照(以及其他一些内容，例如绘图样式、剪辑区域等，但不是像素数据)并将其存储在堆栈中。

绘制形状后，调用context.restore()。这将从状态堆栈中弹出最后保存的状态，并将 Canvas 的当前绘制状态恢复到其中。

您可以根据需要多次执行此操作，而不会累积任何舍入差异。

示例函数:

function drawImageRotated(x, y, rotation, image) {
    context.save();

    context.translate(x, y);
    context.rotate(rotation);
    context.drawImage(image, -image.width / 2, -image.height / 2);        

    context.restore();

    // context translation and rotation are now on the same state they were
    // before the function call
}

有关 Canvas 状态的更多信息，请参阅the canvas specification .