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。

Answer 1

如果heroImage变量是一个包含文件名的字符串，只需在调用rotate()f.ex 之前创建一个新图像并将其附加到 DOM 中：

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
$('#image').append(image).rotate(angle);

编辑 如果#image元素应该是它IMG本身，请尝试以下操作：

var heroImage = 'one.jpg';
var image = new Image();
image.src = heroImage;
document.body.appendChild(image); // or wherever you want to put it
$(image).rotate(angle);