> 웹 프론트엔드 > HTML 튜토리얼 > Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:15:32
원래의
1324명이 탐색했습니다.

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


回复讨论(解决方案)

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

我贴一段代码给你:

로그인 후 복사



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>
로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿