在同一HTML文件中使用两个canvas元素

Question

我可以在同一个HTML文件中使用两个canvas元素吗？我需要从某个区域拖动图像并将它们放在同一页面的另一个区域中。

第一个区域是放置所有图像的画布（我将使用EaselJS库）。第二个也是最重要的部分是网格。告诉我，如果你有其他选择，我需要想法来实现这个解决方案。

Answer 1

是的，您的项目是可行的。

这是一个大纲：

1. 将所有图像添加到EaselJS（作为位图对象）;

2. 在位图上侦听mousedown事件。

3. 关于mousedown：

   • 创建一个html img元素（或在屏幕外显示）

   • 将img元素直接放在EaselJS位图上。

   • 使用jQueryUI

   使img元素可拖动

   • 使第二个画布为可拖动的img

   的dropzone

   • 将Bitmap visible属性设置为false（因此在EaselJS中不再可见）

   • 触发img元素上的mousedown事件以触发拖动img

4. On drop：使用drawImage在第二个画布上绘制已删除的img。

   • 伪代码：secondCanvasContext.drawImage（imgElement，dropX，dropY）