HTML5-移動畫布上已有圖像的最佳方法是什麼

Question

我上週決定想要使用Canvas。我正在製作一個簡單的Web應用程序（根據我女兒的要求），在那裏有小馬，你可以將它們添加到你自己的照片中並移動它們。

我已經擁有了它，所以當按下按鈕時，畫布上會出現一匹小馬的圖片。

我現在的問題是，什麼是當他們已經在畫布上時移動多個圖像的最佳方式？

如果我可以將它們拖拽到每個位置，那將是非常好的，但是我只能使用KineticJS找到教程，而且我無法得到它來顯示我想要的。

那麼，Canvas教程中還有其他拖動圖像嗎？

否則它可以使用鍵盤按鈕，但我不知道如何做到這一點與多個圖像。當我使用鍵盤按鈕時，它會一次移動所有圖像。

任何想法？

Answer 1

你必須跟蹤你繪製每一個的位置，清除整個畫布，並重新繪製它們中的每一個（大概在其中移動它們中的一些）。

這些都不是內置到Canvas中的。我有一個關於making the Canvas interactive的教程，涵蓋了在Canvas上跟蹤，放置和移動（選擇）形狀。該頁面上有一個實時演示，文章底部有源代碼。