ホームページ >ウェブフロントエンド >htmlチュートリアル >Html5キャンバスでsvgオブジェクトを使用する方法。 _html/css_WEB-ITnose
Html5キャンバスでsvgオブジェクトを使用する方法。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:15:321319ブラウズ
CanvasでdrawImageを使用する場合、パラメータとしてsvgオブジェクトを渡すと表示できません。 drawImage がこのタイプのオブジェクト パラメータをサポートしていないのかどうかはわかりません。解決する。 。 。
ディスカッションへの返信 (解決策)
メソッドを参照
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm
コードを投稿します:
68ccb177a5de0ef9542dde7d35bae727
b2386ffb911b14667cb8f0f91ea547a7test6e916e0f7d1e588d4f442bf645aedb2f ;
cdb437ef872df3303b11b84513957a19
svg、canvas { margin:1em }
9c3bca370b5104690d9ef395f2c5f8d1
ca7d9798ec5e4a18e0a6228a7619ceaf
失敗
d6f826aa08c02276657a9ea2f291069aFAILc2caaf3fc160dd2513ce82f021917f8b
94b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var c = document .getElementById ("c").getContext("2d"),
i = document.getElementById("i")
c.drawImage(i, 0, 0)
892f9f5bd4319c3f23ab12c7505b905f
36cc49f0c466276486e50c850b7e4956 ;
081a934c7ac7a6b28b4ef3b648acdd09
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 を使用できます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。