Javascript 如何使用辅助工具拖动画布'；克隆'；？

我有一个简单的HTML画布

<div class='circle'>
  <canvas id="myCanvas" width="100" height="100">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

和脚本

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();

$('.circle').draggable({
    helper: 'clone' // Remove this line to make it draggable
});

---

似乎我无法使用helper选项，因为我想在拖动圆时将其副本保留在原始位置。只有当我删除了helper选项时，draggable才会起作用。这只发生在画布上，如果我使用css绘制圆，则不会发生。小提琴是一种乐器。谢谢

这是因为克隆只克隆canvas元素，而不是它的内容（canvas在这方面是一个特殊的元素）。你可以从中看到这方面的证据

您需要将内容从原始画布重新绘制到克隆实例上：

/// you need to get these objects in advance, then:
clonedContext.drawImage(originalCanvas, 0, 0);

---

不幸的是，克隆画布元素时，不会复制图像数据。您可能希望将画布数据导出为数据url，然后克隆图像

小提琴：

var c=document.createElement（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（50,50,50,0,2*Math.PI）；
ctx.fill（）；
var url=c.toDataURL（）；
var img=document.createElement（“img”）；
setAttribute（“src”，url）；
$（“.circle”）.append（img）；
$（'.circle'）。可拖动({
helper:'clone'//删除此行以使其可拖动
});

现在看起来很有效。我需要更多地玩它，谢谢！

/// you need to get these objects in advance, then:
clonedContext.drawImage(originalCanvas, 0, 0);

<div class='circle'>
</div>

var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fill();
var url = c.toDataURL();
var img = document.createElement("img");
img.setAttribute("src",url);
$(".circle").append(img);

$('.circle').draggable({
    helper: 'clone' // Remove this line to make it draggable
});