HTML在一個畫布上繪製多個圖像

Question

我有一個關於國際象棋的項目。我使用畫布並設置背景來創建電路板。然後在上面畫上32件。移動一塊後，我使用requestAnimFrame重繪了32張。但是，當我移動一塊屏幕閃爍。你能解釋一下嗎？或者我錯在哪裏？

這裏是我的代碼： 類遊戲：

this.true = false; 
this.b = new Boards(); 
this.ctx = canvas; 
animate(); 
game = this; 
canvas.addEventListener('mousemove', function(e) { 
    this.valid = false; 
}) 

function animate() { 
    requestAnimationFrame(animate); 
    if(!game.valid) { 
    game.b.clear(game.ctx); 
    game.b.draw(game.ctx); 
    game.valid = true; 
    } 
} 

類局

function draw(ctx) { 
    imgChessman = new Image(); 
    imgChessman.src = "/path/src"; 
    imgChessman.onload = function() { 
    for(var i = 0; i <= 8; i++) { 
    for(var j = 0; j <= 9; j++) { 
     if(boards[i][j]) { 
     boards[i][j].draw(ctx); 
     } 
    } 
    } 
} 

Answer 1

我建議你看看HTML5的框架，因爲他們已經分層capablities 你可以把每個件在不同的層次，只是改變它的X和Y，我個人更喜歡使用createJs enter link description here它有一個很好的在線文檔開始，它很容易使用