在同一個HTML文件中使用兩個畫布元素

Question

我可以在同一個HTML文件中使用兩個畫布元素嗎？我需要從某個區域拖動圖像並將它們放入同一頁面的另一個區域。

第一個區域是放置所有圖像的畫布（我將爲此使用EaselJS庫）。第二個，也是最大的部分，是一個網格。告訴我，如果你有其他的選擇，我需要想法來實現這個解決方案。

Answer 1

是的，您的項目是可能的。

這裏有一個輪廓：

1. 所有的圖像添加到EaselJS（如Bitmap對象）;

2. 在位圖上聆聽mousedown事件。

3. 在鼠標按下：

   • img元素直接在EaselJS位圖創建HTML img元素（或有它的屏幕外使用）

   • 廣場。

   • 使img元素可拖動與jQueryUI的

   • 讓第二畫布可拖動IMG

   • 位圖可見屬性設置爲false一個懸浮窗（所以它不再顯示在EaselJS）

   • 觸發img元素上鼠標按下事件來觸發拖動IMG

4. 放置：使用drawImage在第二個畫布上繪製放置的img。

   • 僞代碼：secondCanvasContext.drawImage（imgElement，dropX，dropY）