在同一个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）