Heim > Web-Frontend > HTML-Tutorial > Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose

Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:15:32
Original
1324 Leute haben es durchsucht

在canvas中使用drawImage,吧svg对象作为参数传入,无法显示。不知道是不是drawImage不支持这个类型的对象参数。求解。。。


回复讨论(解决方案)

参见方法
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm

我贴一段代码给你:

Nach dem Login kopieren



test





FAIL


FAIL


<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>
Nach dem Login kopieren

其实我很想知道 drawImage 这个方法的第一个参数 可以接受的图像类型是什么 都有哪些??

可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage