Javascript：水平翻转一个图像对象并将其保存到一个新的图像对象中

我创建了一个画布元素上显示的箭头精灵，最初它指向右侧并向右移动。当它开始向左移动时，我想旋转这个精灵。Javascript：水平翻转一个图像对象并将其保存到一个新的图像对象中

即时通讯使用多个精灵，所以翻转整个画布是不是一个真正的选择。

我当然可以创建两个独立的子画面，但理想情况下，如果我在开始时将精灵旋转并将其保存到新的Image对象中，这样会更好。这可能吗？我该怎么做？

P.S.只有Javascript，没有jQuery。

var imagetest = new Image(); 
imagetest.src = "./img/arrow.png";

来源

2014-02-06 inControl

你就不能创建具有相同的URL新的图像对象并应用CSS3转换到它翻转它？ – jfriend00

事情是我使用JavaScript创建图像对象，它不会被放置在DOM树中。 – inControl

您可以将目标设定无论是现有的IMG标记或一些JS图片对象：

<html> 
<head> 
<script> 
function flip(src,target){ 
var img = new Image(); 
img.onload = function(){ 
    var c = document.createElement('canvas'); 
    c.width = this.width; 
    c.height = this.height; 
    var ctx = c.getContext('2d'); 
    ctx.scale(-1,1); 
    ctx.drawImage(this,-this.width,0); 
    this.onload = undefined; 
    target.src = c.toDataURL(); 
} 
img.src = src; 
} 
</script> 
</head> 
<body onload="flip('SOMESPRITE.PNG',document.getElementById('fliptest'));"> 
<img id="fliptest" /> 
</body> 
</html>

来源

2014-02-06 18:13:28 ElDoRado1239

工程就像一个魅力，谢谢。 – inControl

Javascript：水平翻转一个图像对象并将其保存到一个新的图像对象中

回答

相关问题