在<canvas>中移动图像，而不重新绘制整个画布？

Question

我已经制作了一个游戏棋盘，想要拖动和放置我的棋子(.gif文件)，但是我找不到一种方法可以实现这一点而不必无休止地重绘整个棋盘，因为每次移动1像素时都必须清除棋子，这也会清除它下面的任何东西（棋盘和其他棋子）。这种操作是否可能？

- arasteveg

---

如果您希望生成的图形元素持久存在并具有交互性，请考虑使用SVG而不是画布。 - robertc

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, ...);

画板画布在屏幕上不可见，但它将被存储在内存中，以便每次需要重新渲染时，可以快速地进行渲染。

- robbrit

---

+1：在搜索引擎上搜索“双缓冲”以获取更多关于该技术的信息。 - Yvo