javascript - 旋转 JavaScript 图像

Question

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

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

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

这是我当前使用的代码的一部分

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

及其 Canvas 绘制，如果有帮助的话。 问题是 #image 只能引用 html div 元素afaik。

Answer 1

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

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);