Javascript 如何从画布拖动图像？

检查这个

我们可以将“drag me downX”行拖放到canvas div中；文本行将保持在那里，而鼠标后面将有一条半透明的文本行。我想要有同样的效果，将文本行拖出画布。然而，一旦文本被放到画布中，它就无法移动。我如何才能实现上述目标（具有与上述相同的效果非常重要）

HTML

  <ul id="drag">
     <li class="new-item">Drag me down1</li>
     <li class="new-item">Drag me down2</li>
     <li class="new-item">Drag me down3</li>
  </ul>    

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

CSS

 $("li").draggable({
    helper: 'clone'
 });
 $("#myCanvas").droppable({
    accept: "li",
    drop: function(event, ui) {
       var context = $(this)[0].getContext("2d");
       context.font = "16px helvetica";
       context.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
    }
 });

 li{
    font-family:helvetica;
    list-style-type:none;
 }

---

一旦将元素放到

上，随着文本光栅化，它将失去所有意义。因此，没有办法把文本拿出来。最好是将拖动标记的不可见副本附加到画布上，然后每当画布上出现任何拖动事件时，弹出一个元素并将其拖动到所需的位置。然而，这并不能得到你想要的确切标签

---

如果你真的在寻找一个挑战，你可以看看这个问题，它是关于在画布上的文本被光栅化后选择文本

我认为这可能是个问题，因为它基本上是一个元素被拖放到自己身上。我创建了一个隐藏画布，并将原始画布叠加在新画布上。当触发拖动事件时，隐藏画布将被放置在更高的z索引上，并获取要传递到原始画布的坐标信息。

我明白了。我真的不在乎文本的意思；我真的很想用图像来做这个。拖入图像；然后能够将图像拖出；然而，我猜这个图像也失去了所有的意义？是否无法将其设置为“draggable”以实现我上面描述的功能？只要使用

，任何进入并被光栅化的内容都将在上下文中丢失。使用

有什么特别的原因吗？是的，我正在尝试这样做：casetagram.com/builder如果你在右边的菜单中选择“photo”，你可以上传照片，你会看到它们应用到画布上，使用gloabCompositeOperation='source top'，你也可以像我描述的那样从画布上拖动照片；我正试图弄清楚如何做到这一点