拖放HTML5的画布擦除

Question

我在任何地方都找不到这个问题的答案。也许你可以帮助我。 我在画布和div中绘制图表（canvas：chart.js / div：morris.js）。 我只是用HMTL5设置元素拖放，它工作正常，但是当我移动画布时它会擦除它上面的所有内容。 在div图表上留下但没有画布。 每次移动画布时，是否有重绘以外的解决方案？

感谢您的帮助

编辑：代码示例

<article class="widget" draggable="true">
    <header>
    </header>
    <canvas class="canvas-container"></canvas>
</article>

<article class="widget" draggable="true">
    <header>
    </header>
    <div class="canvas-container"></div>
</article>

Answer 1

您选择不提供代码，因此一般来说您可以使用图表画布作为img元素或其他画布元素的来源。

例如，给定一些html元素：

<canvas id="sourceCanvas" width=300 height=300></canvas>

<img id="theCopy">

<canvas id="destinationCanvas" width=300 height=300></canvas>

将html画布内容复制到图像元素的代码：

// This code will set the source of that img element to be the canvas image

var canvas=document.getElementById("sourceCanvas");
var ctx=canvas.getContext("2d");

document.getElementById('theCopy').src=canvas.toDataURL();

将html画布内容复制到另一个html画布元素的代码：

var source=document.getElementById("sourceCanvas");

var destination=document.getElementById("destinationCanvas");
var destinationContext=destination.getContext("2d");

destinationContext.drawImage(source,0,0);

演示：http://jsfiddle.net/m1erickson/6yvXb/