移動圖像在<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, ...); 

董事會畫布是不是在屏幕上可見，但使每一次，你需要重新渲染，它會被存儲在內存中呈現非常快。