js使用canvas实现绘制五角星代码详解 -六月初技术站

js使用canvas实现绘制五角星代码详解

六月初 JavaScipt 2023-08-27 17:33:06

五角星无论是开发还是生活中都是比较常见的一个形状，关于五角星的各类物品或形状都极为常见。

在网站中经常看到使用五角星形状来进行评分等操作。

那么在前端开发中如何使用canva实现五角星绘制呢？本篇文章就该问题给出详细代码展示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="200" height="200"></canvas>
		<script type="text/javascript">
			var cvs = document.getElementById('mycanvas'),
				ctx = cvs.getContext('2d');
				create5star(ctx,100,100,100)
			function create5star(cxt, sx, sy, radius) {
				cxt.translate(100, 100);
				cxt.beginPath();
				var dig = Math.PI / 5 * 4;
				for (var i = 0; i < 5; i++) {
					//画五角星的五条边 
					var x = Math.sin(i * dig);
					var y = Math.cos(i * dig);
					cxt.lineTo(x * radius, y * radius);
				}
				cxt.closePath();
				cxt.stroke();
				cxt.fill();
				cxt.restore();
			}
		</script>
	</body>
</html>