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; 
    } 
} 

Класс Board

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, у него есть хорошая онлайн-документация для начала, и она очень проста в использовании