添加一個包含畫布的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不起作用

回答

相關問題