CanvasでdrawImageを使用する場合、パラメータとしてsvgオブジェクトを渡すと表示できません。 drawImage がこのタイプのオブジェクト パラメータをサポートしていないのかどうかはわかりません。解決する。 。 。
メソッドを参照
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm
コードを投稿します:
;
< /html>
Canvas で SVG 画像を描画できないのはなぜですか?
実際、drawImage メソッドの最初のパラメータとして受け入れられる画像タイプは何なのかを知りたいのです。 ?
Firefox16、Chrome などの svg をサポートするブラウザでテストしてください
<html> <head> <title>test</title> <style> svg, canvas { margin:1em } </style> </head> <body> <p> <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="i"> FAIL <circle cx="50px" cy="50px" r="50px" fill="lime"/> </svg> <canvas width="100" height="100" id="c">FAIL</canvas> </p> <script type="text/javascript"> window.onload = function () { var ctx = document.getElementById("c").getContext('2d'); var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("i")); var img = new Image(); img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml); img.onload = function () { ctx.drawImage(img, 0, 0); }; } </script> </body></html>
実際、drawImage メソッドの最初のパラメータとして受け入れられる画像タイプは何なのか知りたいのですが? ?
パラメータとして HTMLImageElement、HTMLCanvasElement、または HTMLVideoElement を使用できます