0

我在任何地方都找不到这个问题的答案。也许你可以帮助我。我在画布和 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>
4

1 回答 1

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/

在此处输入图像描述

于 2014-06-06T15:40:02.993 回答