Html5 canvas中怎么用使用svg对象
日期：2014-05-17 浏览次数：20726 次
Html5 canvas中如何用使用svg对象。
在canvas中使用drawImage，吧svg对象作为参数传入，无法显示。不知道是不是drawImage不支持这个类型的对象参数。求解。。。
------解决方案--------------------
在支持svg的浏览器中进行测试，如Firefox16,Chrome
在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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
