Heim >Web-Frontend >HTML-Tutorial >Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose
Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:321325Durchsuche
在canvas中使用drawImage，吧svg对象作为参数传入，无法显示。不知道是不是drawImage不支持这个类型的对象参数。求解。。。
回复讨论(解决方案)
参见方法
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm
我贴一段代码给你：
<script> <br /> var c = document.getElementById("c").getContext("2d"), <br /> i = document.getElementById("i") <br /> c.drawImage(i, 0, 0) <br /> </script>
为什么canvas没有吧svg的图像画出来呢?如果画出来，怎么办呢（不用第三方的东西）？
其实我很想知道 drawImage 这个方法的第一个参数 可以接受的图像类型是什么 都有哪些？？
在支持svg的浏览器中进行测试，如Firefox16,Chrome
<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作为参数
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS兼容性问题，要实例说明啊_html/css_WEB-ITnoseNächster Artikel：2个HTML 如何POST传值和接收值？_html/css_WEB-ITnose