HTML在一个画布上绘制多个图像

我有一个关于国际象棋的项目。我使用画布并设置背景来创建一个板。然后在上面画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);
      }
    }
  } 
} 

功能图（ctx）{
imgChessman=新图像（）；
imgChessman.src=“/path/src”；
imgChessman.onload=函数（）{
对于（var i=0；i我建议您看看html5框架，因为它们具有分层能力
你可以将每一个片段放在不同的层中，只需更改其x和y，我个人更喜欢使用createJs。它有一个很好的在线文档作为开始，并且非常易于使用
谢谢你的共享：）。我想，我每次重画时都会重新加载图像：(