擦除部分運動圖像

有沒有辦法清除只有1個元素的畫布（html5）？我在畫布上有一個移動的圖像，當我擦除圖像時，背景顏色也一樣。有沒有辦法只是刪除圖像，而不是整個背景。我的背景只是一個簡單的顏色，但在未來它會更復雜。擦除部分運動圖像

這也很棘手，因爲沒有辦法從屬性中獲取圖像x，y pos。

ClassLoadImages.prototype.m_move = function(){ 
    this.x=++img1_x; 
    this.y=++img1_y; 
    //img1_x++; 
    //img1_y++; 
    // alert(img.x); 
     ctx.drawImage(img.imgElement, this.x, this.y); 
    // ctx.fillText("finished loading " ,10,40); 
    }; 


function doGameLoop() { 

    ctx.clearRect(0,0,600,400); 
    img.m_move(); 
    if (img.x>30) 
    { 
      clearInterval(gameLoop); 

    } 
} 




    var img= new ClassLoadImages('images/image4.jpg'); 
gameLoop = setInterval(doGameLoop, 100); 
</script>

來源

2013-04-09 jagguy

簡單的答案是否定的。畫布是平坦的位圖，而不是分層的對象集合。一旦你畫出來，你就失去了繪畫背後的背景。

您可以嘗試通過記錄您用於創建畫布的步驟，然後重新創建它，可以使用或不使用相關圖像來自行實現此功能。

來源

2013-04-09 12:48:23

所以解決方案是重新繪製整個畫布？ – jagguy 2013-04-09 12:49:33

是的 - 我會這麼說。除非你能弄清楚如何重繪你想要移除的圖像後面的位。但無論哪種方式，都將由您來跟蹤畫布上的元素。 – 2013-04-09 12:50:24

@jagguy - 看看http://kineticjs.com/，看看它是否具備你想做的功能。我只是簡單地看了一下，並將其加入書籤供將來使用。 – 2013-04-09 12:51:50

擦除部分運動圖像

回答

相關問題