Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:15:321318瀏覽
在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作为参数
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn