Javascript 为什么这张照片不'；你不能旋转吗？

我想在绘图之前在html画布上旋转图像。我使用了以下代码（

ctx

是画布上下文）：

我希望图像旋转45°。如果我省略最后一行，事实上就是这样。但如果我包括最后一行，图像将不旋转地绘制。为什么会这样？我希望

beginPath（）

之后的所有内容都与之前的绘图无关

---

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

加载图像时，您的

onload

函数会异步触发

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

您的代码如下所示：

旋转画布
加载图像“Test.png”
加载图像后，运行以下代码：{绘制图像}
正在加载图像时。。。
重置旋转

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

var img=newimage（）；
img.src=“Test.png”；
img.onload=函数（）
{
ctx.旋转（数学PI/4）；
ctx.drawImage（img，0,0）；
ctx.beginPath（）；
ctx.resetTransform（）；
//在图像加载并绘制后绘制其他内容
}
//在图像加载之前绘制一些东西

加载图像时，您的

onload

函数将异步触发

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

您的代码如下所示：

旋转画布
加载图像“Test.png”
加载图像后，运行以下代码：{绘制图像}
正在加载图像时。。。
重置旋转

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

var img=newimage（）；
img.src=“Test.png”；
img.onload=函数（）
{
ctx.旋转（数学PI/4）；
ctx.drawImage（img，0,0）；
ctx.beginPath（）；
ctx.resetTransform（）；
//在图像加载并绘制后绘制其他内容
}
//在图像加载之前绘制一些东西

将resettransform放在后面drawImage@StepanYakovenko把你的答案放在答案部分，然后放在后面drawImage@StepanYakovenko把你的答案放在答案区。

onload

实际上什么时候启动？当设置了

src

时？@wazz No，它会在设置了

src

并从服务器（或其他地方）完全加载映像后触发。哦，当然。但是设置src确实会加载图像，我知道这一点。tnx。该事件应被称为

onload

：）啊，这就是原因。好吧，这让我的任务更加困难，但至少我现在明白发生了什么。非常感谢。

onload

实际何时点火？当设置了

src

时？@wazz No，它会在设置了

src

并从服务器（或其他地方）完全加载映像后触发。哦，当然。但是设置src确实会加载图像，我知道这一点。tnx。该事件应被称为

onload

：）啊，这就是原因。好吧，这让我的任务更加困难，但至少我现在明白发生了什么。非常感谢。

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();