javascript - 旋转用javascript制作的图像

Question

我想在 javascript 中旋转图像。在 javascript 中用于图像的变量是 heroImage。我正在使用 jquery rotate，它仅在 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 兼容

score 1 · Accepted Answer

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

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

或者，使用 CSS3 变换旋转整个画布

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

score 0 · Accepted Answer

您可以使用 CSS3 来完成这项工作。

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

例如，您可以查看 FontAwesome 的 CSS

如果你必须使用 javascript，使用可以通过 JS 更改 CSS。

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

score 0 · Accepted Answer

首先将“id”属性添加到图像

heroImage.id = 'image';

并为“图像”添加 css，如下所示

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

3 回答 3