Canvas中加载SVG图像代码,Css代码库,德仔网

代码语言

代码分类

【Css】 Canvas中加载SVG图像

作者:思睿 / 发布于2014/10/10/ 897


	<html>
	<head>
	<title>在 Cavas 中加载 SVG 图像</title>
	</head>
	<body>
	以下代码在支持Cavas、SVG、XMLSerializer的浏览器中测试，如Firefox、Chrome。
	<table cellspacing="1" cellpadding="10" border="1">
	<tr>
	<td>SVG原图</td><td>Canvas 对象中加载</td>
	</tr>
	<tr>
	<td id="td1">
	<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="svg1">
	 <circle cx="50px" cy="50px" r="50px" fill="blue"/>
	</svg>
	</td>
	<td><canvas width="100" height="100" id="canvas1"></canvas></td>
	</tr>
	</table>
	<script type="text/javascript">
	 window.onload = function () {
	 var ctx = document.getElementById("canvas1").getContext('2d');
	 //https://developer.mozilla.org/en-US/docs/XMLSerializer
	 var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("svg1"));
	 var img = new Image();
	 //https://developer.mozilla.org/en-US/docs/DOM/window.btoa
	 img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);

	 //也可以直接写
	 //img.src = "data:image/svg+xml;base64," + window.btoa(document.getElementById("td1").innerHTML);

	 img.onload = function () {
	 //drawImage 可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数
	 ctx.drawImage(img, 0, 0);
	 };
	 }
	</script>
	</body>
	</html>

试试其它关键字

　Canvas　　SVG图像　

同语言下

可能有用的

思睿贡献的其它代码(2)