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：水平翻轉一個圖像對象並將其保存到一個新的圖像對象中

回答

相關問題