전체 캔버스를 다시 그려 넣지 않고 <canvas>의 이미지를 이동 하시겠습니까?

Question

게임 보드를 만들었으므로 조각 (.gif)을 드래그 앤 드롭하고 싶지만 매번 조각을 지워야하기 때문에 보드 전체를 다시 그릴 필요없이이 작업을 수행 할 수있는 방법을 찾을 수 없습니다. 그것은 1 픽셀을 이동시키고 그 아래에있는 것이 무엇이든지 지워집니다 (보드와 다른 조각들). 심지어 가능할까요?

Answer 1

예, 매번 전체 보드를 다시 그려야합니다. 당신이 사용할 수있는

한 기술은 오프 스크린 캔버스 :

var board = document.createElement("canvas"); 
board.width = width; 
board.height = height; 

var boardContext = board.getContext("2d"); 

// rendering code for board 
// ... 

// now draw board onto main canvas 
var context = mainCanvas.getContext("2d"); 

context.drawImage(board, ...); 

보드 캔버스 화면에 표시되지 않습니다,하지만 당신은 그것을 다시 렌더링해야 할 때마다 있도록 메모리에 저장됩니다 매우 빠르게 렌더링됩니다.