在画布上绘制之前旋转Image对象 - HTML

Question

我有一个像下面的Image对象：

imgObj = new Image();
imgObj.src = "http://localhost/images/img1.png";
imgObj.onload = function () {}

我想在单击按钮时在画布上绘制此图像。在每次点击时，图像都会在其上绘制，但我想在绘制之前旋转对象，因为我不希望结果翻倒，我需要以不同的方式看待它。

我在我的项目中使用javascript和jQuery。对此有什么解决方案吗？

Answer 1

您可以使用context.rotate旋转画布，然后在画布上正常绘制图像。图像将旋转出来。如果您想在不旋转的情况下绘制更多内容，请与save和restore结合使用。

context.save();
context.rotate(45 * Math.PI / 180);
context.drawImage(img, 0, 0);
context.restore();

Answer 2

这应该有效：

imgObj.style.transform = "rotate(90deg)"

它在图像对象上设置transform css样式属性。