canvas如何使用Path2D绘制svg中path路径

六月初六月初 JavaScipt 2024-11-08 21:09:30

svg格式的图片是开发中最常见的格式之一，通过svg格式可以将一些图片展示的更为直观清晰。

那么前端在开发中，如果需要将svg格式的图片绘制在canva上又要如何实现呢？

本篇文章就来介绍如何使用canvas将svg格式图片绘制在画布中。

一、需要绘制的svg代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<g>
	<path d="M528.87,258.69c-40.22,40.22-91.27,78.89-153.14,116.02v-88.17C453.08,233.94,516.5,172.06,566,100.9h55.69v798.19h-92.81   V258.69z"/>
</g>
</svg>

二、html中实现canvas绘制svg图片

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id='canvas' height='1000' width='1000'></canvas>
		<script>
			window.onload = function() {
			  var canvas = document.getElementById('canvas');
			  var ctx = canvas.getContext('2d');
			  ctx.strokeStyle = '#000';
			  ctx.lineWidth = 1;
			  ctx.fillStyle = '#000'
			  var p = new Path2D("M528.87,258.69c-40.22,40.22-91.27,78.89-153.14,116.02v-88.17C453.08,233.94,516.5,172.06,566,100.9h55.69v798.19h-92.81   V258.69z");
			  ctx.stroke(p);
			  ctx.fill(p);
			}
		</script>
	</body>
</html>

通过上述方式，即可实现将svg格式图片绘制到canvas画布中。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！