javascript - HTML5 仅旋转图像而不是画布上下文

Question

有没有办法在画布内旋转图像？我唯一能找到的就是旋转画布的整个上下文。我想在画布上独立旋转图像。

Answer 1

不幸的是，您不能直接旋转图像。

如果您想在位置 X,Y 以角度 A（弧度）旋转并在图像中间显示一个宽度为 W 和高度为 H 的图像，您可以执行以下操作：

ctx.translate(-X - W / 2, -Y - H / 2);
ctx.rotate(A);
ctx.drawImage(YOUR_IMAGE, 0, 0);
ctx.rotate(-A);
ctx.translate(X + W / 2, Y + H / 2);