Html5キャンバスでsvgオブジェクトを使用する方法。 _html/css

ディスカッションへの返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

Html5キャンバスでsvgオブジェクトを使用する方法。 _html/css_WEB-ITnose

Jun 24, 2016 pm 12:15 PM

CanvasでdrawImageを使用する場合、パラメータとしてsvgオブジェクトを渡すと表示できません。 drawImage がこのタイプのオブジェクトパラメータをサポートしていないのかどうかはわかりません。解決する。。。

ディスカッションへの返信 (解決策)

メソッドを参照
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm

コードを投稿します:

ログイン後にコピー

<html xmlns="http://www.w3.org/1999/xhtml">
<title>test</title> ;
<スタイル>
svg、canvas { margin:1em }
</head>
<svg xmlns; w3.org / 2000/svg" width="100px" height="100px" id="i">
失敗
<circle cx="50px" cy="50px" r="50px" fill="lime "/>gt;
</svg>
<canvas width="100" height="100" id="c">FAIL</canvas>
</p>
<script>
var c = document .getElementById ("c").getContext("2d"),
i = document.getElementById("i")
c.drawImage(i, 0, 0)
</script>>
</body> ;
< /html>

Canvas で SVG 画像を描画できないのはなぜですか?

実際、drawImage メソッドの最初のパラメータとして受け入れられる画像タイプは何なのかを知りたいのです。 ?

Firefox16、Chrome などの svg をサポートするブラウザでテストしてください

&lt;html&gt; &lt;head&gt;  &lt;title&gt;test&lt;/title&gt;  &lt;style&gt;  svg, canvas { margin:1em }  &lt;/style&gt; &lt;/head&gt; &lt;body&gt;  &lt;p&gt;  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100px&quot; height=&quot;100px&quot; id=&quot;i&quot;&gt;  FAIL  &lt;circle cx=&quot;50px&quot; cy=&quot;50px&quot; r=&quot;50px&quot; fill=&quot;lime&quot;/&gt;  &lt;/svg&gt;  &lt;canvas width=&quot;100&quot; height=&quot;100&quot; id=&quot;c&quot;&gt;FAIL&lt;/canvas&gt;  &lt;/p&gt;  &lt;script type=&quot;text/javascript&quot;&gt;      window.onload = function () {          var ctx = document.getElementById(&quot;c&quot;).getContext('2d');          var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById(&quot;i&quot;));           var img = new Image();          img.src = &quot;data:image/svg+xml;base64,&quot; + window.btoa(svg_xml);          img.onload = function () {              ctx.drawImage(img, 0, 0);          };      }  &lt;/script&gt; &lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

実際、drawImage メソッドの最初のパラメータとして受け入れられる画像タイプは何なのか知りたいのですが? ?

パラメータとして HTMLImageElement、HTMLCanvasElement、または HTMLVideoElement を使用できます

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。