HTML 5使用畫布或畫布替代

Question

我想基本上使用網格工作，藉此我可以創建圖像並將它們相應放置在網格上並實時更改網格圖像的位置。

我已使用HTML5的

<canvas></canvas> 

不過，我發現，每次我想刪除的DrawImage或矩形我必須使用

clearRect() 

這是一個巨大的麻煩和衝突與重疊的圖像/形狀。 是否有任何其他的方式去不必使用

clearRect() 

每次

這樣做其它？甚至可能是一個完全不同的網格或畫布，像系統。

Answer 1

您必須清除整個畫布並重新開始每個勾號。您應該將圖像存儲在一個陣列中以跟蹤它們，例如：

[ 
    { 
     image: "image_bottom.png", 
     x: 100, 
     y: 200 
    }, 
    { 
     image: "image_middle.png", 
     x: 10, 
     y: 200 
    }, 
    { 
     image: "image_topmost.png", 
     x: 100, 
     y: 20 
    } 
] 

然後循環遍歷每個刻度線並繪製它們。第一個將在最底層。

// Redraws the canvas completely 
// pseudo code 
function tick(){ 
    canvas.clearRect(0,0,element.width,element.height) 

    for each in list 
     draw image 
}; 

setInterval(tick,1000/60); // draw for 60FPS 

滴答功能將呈現畫布每隔幾毫秒，以獲得60FPS。

完全重新渲染是做到這一點的最佳方式。你可以用其他方法，但是你需要複雜的遮罩和循環遍歷像素。