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

Question

有没有一种方法可以在画布内旋转图像？我所找到的唯一的东西是旋转整个画布的上下文。我希望能够独立地在画布上旋转图像。

- Bryan Williams

Answer 1

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

如果您想以角度A（弧度制）在图像中心旋转宽度为W、高度为H的图像，并将其显示在位置X，Y上，则可以做以下操作：

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

- Pierre