Question

我想在绘制之前旋转html画布上的图像。我使用了以下代码（ctx是画布上下文）：

ctx.rotate(Math.PI / 4);
var img = new Image();
img.src = "Test.png";
img.onload = function()
{
    ctx.drawImage(img, 0, 0);
}
ctx.beginPath();
ctx.resetTransform();

我希望图像旋转45°。如果我省略最后一行，实际上就是这种情况。但是，如果我包括最后一行，则图像将不旋转而绘制。为什么会这样呢？我希望beginPath()之后的所有内容都与之前的图形无关。

如何避免这种影响？我想在图像后画东西，根本不要旋转它们。

Answer 1

加载图像后，onload函数将异步触发。

其余的代码在加载图像时运行，并在加载图像之前重置上下文。

您的代码是这样的：

Rotate canvas
Load an image "Test.png"
When the image loaded, run this code: { Draw the image }
While the image is loading...
Reset the rotation

要等待图像加载，请将完整的绘图代码移至该功能：

var img = new Image();
img.src = "Test.png";
img.onload = function()
{
    ctx.rotate(Math.PI / 4);
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.resetTransform();
    //Draw something else after the image has loaded and drawn
}
//Draw something BEFORE image load

为什么此图像不旋转？

1 个答案: