HTML5-移动画布上已有的图像的最佳方法是什么

Question

我上周决定要玩Canvas。我正在做一个简单的webapp（根据我女儿的要求），那里有小马，你可以将它们添加到你自己的图片中并移动它们。

我已经拥有了，所以当按下按钮时，画布上会出现一张小马的照片。

我现在的问题是，当多个图像已经在画布上时，移动多个图像的最佳方法是什么？

如果我可以拖动它们会很棒，但我只能使用KineticJS找到教程，但我无法显示我想要的内容。

那么，Canvas教程上还有其他任何拖动图像吗？

否则可以使用键盘按钮，但我无法弄清楚如何使用多个图像。当我使用键盘按钮时，它会立即移动所有图像。

有什么想法吗？

Answer 1

你必须跟踪你绘制每个画布的位置，清除整个画布，然后重新绘制每一个画布（可能在这个过程中移动它们中的一些）。

这些都不是内置于Canvas中的。我有一个关于making the Canvas interactive的教程，包括在Canvas上跟踪，放置和移动（选择）形状。该页面上有一个现场演示，文章底部有源代码。