Question

我想在不旋转画布的情况下在画布上绘制半复杂元素，这样我就不需要计算元素的所有x / y点。

我认为我需要使用的基本过程是：

将0,0点转换为绘制元素将旋转的点
旋转画布，
绘制元素，
向后旋转画布，
恢复原点。

我需要不止一次这样做。我已经读过旋转/旋转后部可能会引入一些错误，最终的图像会稍微偏离。有没有办法避免这种情况？

Answer 1

在执行轮播和翻译之前，请致电context.save()。这将创建画布当前转换的快照（以及其他一些内容，如绘图样式，剪辑区域等，但不包括像素数据）并将其存储在堆栈中。

绘制完形状后，请致电context.restore()。这将从状态堆栈中弹出最后保存的状态，并将画布的当前绘制状态恢复为该状态。

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

示例功能：

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
}

有关画布状态的更多信息，请参阅the canvas specification。

在画布上绘制旋转元素

1 个答案: