日期:2014-05-17  浏览次数:20509 次

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>