Question

我想在javascript中旋转图像。在javascript中用于图像的变量是heroImage。我正在使用jquery旋转，只有在html中旋转图像时它才能正常工作，但在javascript中则不行。通常它看起来像这样

$("#image").rotate(angle);

但这仅适用于以html创建的图像。

这是目前使用

的代码的一部分

var heroImage = new Image();
heroImage.src = "images/hero.png";

它画的画布，如果有帮助的话。问题是#image只能引用一个html div元素afaik .. 我不想要的答案是：

$("#image").rotate(angle);

因为这仅适用于html图像

它用于游戏，所以一切都必须在javascript中，任何css相关的东西似乎都不起作用。它也必须是IE9兼容的

Answer 1

您可以在画布上绘制它，然后在画布中旋转场景

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 4);

或使用CSS3转换旋转整个画布

document.getElementById('#canvas').style.webkitTransform = "rotate(45deg)";

Answer 2

您可以将CSS3用于此作业。

img.rotated {
    transform: rotate(30deg);
}

举个例子，你可以看看FontAwesome的CSS

如果您使用javascript，请使用可以通过JS更改CSS。

document.getElementById('img.rotated').style.transform = rotate(30deg);

Answer 3

首先添加＆＃39; id＆＃39;财产到图像

heroImage.id = 'image';

并为＆＃39;图片添加css＆＃39;如下

$('#image').css('transform', 'rotate('+angle+'deg)');