javascript - 在 Canvas 上放置更多图片

Question

我是 Fabric.js 的新手，我正在寻找在放置事件后在 Canvas 上绘制图片的方法。

我已经明白了，但我不知道如何在 Canvas 上插入更多图片(在第二次下降时，我只有最后一张在 Canvas 上插入图片)。

我应该将 对象插入某个数组然后绘制数组吗？或者存在其他解决方案？

我的问题示例: http://fiddle.jshell.net/654321mia/8JSVK/10/

每次只能是 Canvas 上的一张图片。

Answer 1

我已经更新了您的jsfiddle ，现在可以了。

问题是您在第一次放置后创建了fabric.js Canvas。这会导致重新创建 canvas 元素，并且您在 HTML 中设置的事件处理程序会丢失。当然有更好的方法可以使用 Fabric.js 来做到这一点，但我只是将放置处理程序放在 Canvas 的容器上，这样它就可以完美地工作:

<div id="myCanvas-container" style="border:1px solid #d3d3d3;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <canvas id="myCanvas">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>