附加包含画布的 div 不起作用答案

【问题标题】：Appending a div containing canvas is not working附加包含画布的 div 不起作用
【发布时间】：2017-10-04 07:14:04
【问题描述】：

我正在使用canvg 将 div 中存在的 svg 转换为画布（到目前为止它工作正常），然后将 div 的 innerHTML 复制到另一个 div，但它不起作用。画布即将到来，但该画布中不会出现任何内容。提前致谢

<div id="k">
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
</div>
<div id="kk">
<p>Watch me</p>
</div>

var svgTag = document.querySelectorAll('#k svg');    
    svgTag = svgTag[0];
    var c = document.createElement('canvas');
    c.width = svgTag.clientWidth;
    c.height = svgTag.clientHeight;
    svgTag.parentNode.insertBefore(c, svgTag);
    svgTag.parentNode.removeChild(svgTag);
    var div = document.createElement('div');
    div.appendChild(svgTag);
    canvg(c, div.innerHTML);

    setTimeout(function(){
        var data = $("#k").html();
      $("#kk").append($(''+data+''));
    },5000);

JSFiddle

【问题讨论】：

是的，canvas 是一个特殊的元素。不能只用javascript复制，必须“重绘”
如何重绘画布？谢谢

标签： javascript jquery html canvas canvg

【解决方案1】：

canvas 元素的内容以二进制数据的形式保存，与图像元素的内容非常相似。画布元素没有可用于重新创建画布的 innerHTML 文本属性。

以下示例显示了使用标准画布 2D 方法克隆画布元素的方法：

function canvasClone(c1) {
    var c2 = document.createElement('canvas');
    c2.width=c1.width;
    c2.height=c1.height;
    c2.getContext("2d").drawImage(c1, 0,0);
    return c2;
}

您可以通过在fiddle中包含该函数并将超时处理更改为：

setTimeout(function(){
  kk.appendChild(canvasClone(c));
},5000);

如果您愿意，可以随意在 JQuery 中重写超时代码。

【讨论】：