HTML5中国象棋棋盘和棋子

我有一个关于中国象棋的项目。 首先，我必须创建一个棋盘和大约32个棋子。

---

我应该使用1块画布创建棋盘，然后在上面绘制32个图像，还是创建1块棋盘画布，然后创建32块画布，每个画布对应一个棋子。因为我想拖拽棋子，但如果只使用1个画布，就必须重新绘制太多的棋子，这似乎不太好。我该怎么做，你能给我一些建议或者给我一些相同的指导吗。谢谢

KineticJS是一个Javascript库，可以帮助您解决问题。它支持在画布上拖动东西，等等。这里有一个使用Kinetic和HTML5画布的简单教程：

这可能是一个偏好问题，所以请谨慎对待。我只会使用一块画布，直接在上面画出作品

---

在大多数游戏（包括HTML5）中，渲染都是非常“烟雾和镜子”，真实的数据存储在幕后丑陋的结构中。尝试使用多个画布会将其中一些数据（特别是位置）拖到渲染层中。虽然这可能仍然有效，但如果您将所有数据隐藏在幕后，并使用数学来确定渲染位置以及鼠标单击是否击中了对象，并且您需要开始拖动，则可以更好地控制发生的情况。

我正在检查，泰。是否可以创建一个图像作为背景，然后在其上拖动另一个图像（保留背景）？我实现了1个画布，并在其上绘制图像。我重新画了一个棋子（在当前位置画棋盘，然后画出棋子的新位置），但当快速拖动时，它并不像预期的那样平滑。我想知道，我是应该重画所有的棋子还是仅仅重画一个。如果你只处理32幅图像，那么每一帧都重画就可以了。是的，但我也必须重画棋盘。它使屏幕闪烁。。有没有办法保留棋盘的背景，只需重新绘制棋子？画布是透明的，所以如果你愿意，你可以将背景图像设置为你的棋盘。如果您正在闪烁，请确保所有绘图都一起完成。您可能还需要调用Window.requestAnimationFrame（）以确保在重新绘制窗口之前进行绘制。