添加一个包含画布的div不起作用

我正在利用canvg将div中存在的svg转换为canvas（至此它工作正常），然后将div的innerHTML复制到另一个div，但它不起作用。画布即将到来，但画布中不会出现任何内容。预先感谢添加一个包含画布的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

来源

2017-10-04 Kumar

是的，画布是一个特殊的元素。它不能只是用javascript复制，它必须“重绘” –

如何重画画布？谢谢 – Kumar

画布元素的含量被保持为二进制数据，很像一个图像元素的含量。画布元素没有可用于重新创建画布的innerHTML文本属性。

下面的示例示出了使用标准画布二维方法克隆画布元件的方法：

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; 
}

可以通过在小提琴的功能和改变的超时处理以证明它：

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

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

来源

2017-10-04 08:24:49 traktor53

添加一个包含画布的div不起作用

回答

相关问题