旋转用javascript制作的图像答案

【问题标题】：Rotating an image made in javascript旋转用javascript制作的图像
【发布时间】：2013-08-21 10:48:54
【问题描述】：

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

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

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

这是我目前使用的部分代码

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

及其绘制的 canvas ，如果有帮助的话。问题是#image 只能引用 html div 元素 afaik .. 我不想要的答案是这样的：

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

因为它只适用于 html 图片

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

作为一个例子，你可以看看 FontAwesome 的 CSS

如果你有使用过javascript，使用可以通过JS改变CSS。

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

【讨论】：

【解决方案3】：

首先给图片添加 'id' 属性

heroImage.id = 'image';

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

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

【讨论】：

有意思，我看看。
javascript:heroImage.id = 'image'; heroImage.angle = 45;我像你说的那样添加了css，但它似乎不起作用
在这里。如果写 heroImage.id ='image'; heroImage.src='images/hero.png' 它将被转换为因为 img 没有任何称为角度的有效属性它不起作用。通过添加 css 是必不可少的，如下所示 $('#image').css('transform', 'rotate(90deg)');它附加到作为在这个例子中，角度值是硬编码的。为了使它动态使用 $('#image').css('transform', 'rotate('+angle+'deg)');其中“角度”是一个变量。