移动图像在<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, ...); 

董事会画布是不是在屏幕上可见，但使每一次，你需要重新渲染，它会被存储在内存中呈现非常快。