旋转javascript图像

【问题标题】：Rotating javascript image旋转javascript图像
【发布时间】：2013-08-19 11:13:02
【问题描述】：

我想在 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。

【问题讨论】：

到目前为止您尝试过什么？您有尝试过的示例代码吗？
将其绘制到画布上。
也许可以试试raphael。不过，不太确定您实际上在寻找什么，您应该澄清一下。您的图像如何在 javascript 中定义为位图，或者您是否使用库辅助函数？

标签： javascript

【解决方案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);

【讨论】：

那么，在这种情况下，#image 是 div 或类似的，而不是 <img/>，对吗？
我猜是这样，但从问题中很难判断。