HTML 하나의 캔버스에 여러 이미지 그리기

Question

나는 체스에 관한 프로젝트를 가지고 있습니다. 캔버스를 사용하고 배경을 설정하여 보드를 만듭니다. 그 위에 32 조각을 그립니다. requestAnimFrame을 사용하여 조각을 이동 한 후 32 개를 다시 그릴 수 있습니다. 그러나 조각을 움직이면 화면이 깜박입니다. 그것을 설명 할 수 있습니까? 그들은 당신이 각을 넣을 수 있습니다 capablities 레이어링 때문에 내가, HTML5 프레임 워크를 살펴 당신을 제안

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

: 클래스 게임 : 여기

내 코드입니다 조각을 다른 레이어에 그냥 x와 y를 변경, 개인적으로 내가 사용하는 것을 선호합니다. enter link description here 그것은 좋은 온라인 설명서를 가지고 시작하고 사용하기 정말 쉽습니다