Javascript 将图像移入<；帆布>；不重画整个画布？

我制作了一个游戏板，我想拖放我的棋子（.gif），但我找不到一种方法来做这件事，而不必无休止地重新绘制整个棋盘，因为每次移动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, ...);

---

板画布在屏幕上是不可见的，但是它将被存储在内存中，因此每次需要重新渲染时，它呈现得非常快。

+ 1：搜索“双缓冲”以获得关于该技术的更多信息。如果您希望生成的图形元素持续并交互，请考虑使用SVG而不是画布。