首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

Html5 canvas中怎么用使用svg对象

2012-10-20 
Html5 canvas中如何用使用svg对象。在canvas中使用drawImage,吧svg对象作为参数传入,无法显示。不知道是不是

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

[解决办法]
在支持svg的浏览器中进行测试,如Firefox16,Chrome

HTML code
<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> 

热点排行