divを含むキャンバスを追加すると動作しません

Question

私は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

Answer 1

キャンバス元素の含有量は、多くの画像要素の内容と同様に、バイナリデータとして保持されています。キャンバス要素には、キャンバスの再作成に使用できる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); 

次の例では、標準的なキャンバス2D法を用いて、キャンバス要素をクローニングする方法を示します

希望する場合は、JQueryでタイムアウトコードを書き直してください。