canvas绘制五角星

最新推荐文章于 2024-08-12 20:32:17 发布

仰望星空的包子

最新推荐文章于 2024-08-12 20:32:17 发布

阅读量990

点赞数 1

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.youkuaiyun.com/sinat_21206105/article/details/54632587

版权

html5 专栏收录该内容

2 篇文章

订阅专栏

canvas绘制五角星代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五角星绘制</title>
</head>
<body>
	<canvas id="star">
		
	</canvas>
	<script type="text/javascript">
		var star=document.getElementById('star');
		var ctx=star.getContext('2d');
		star.width=800;
		star.height=800;
		var R=300;
		var r=150;
		ctx.lineWidth=10;
		ctx.beginPath();
		for(var i=0;i<5;i++){
			ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+400,
						-Math.sin((18+i*72)/180*Math.PI)*R+400
				);
			ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+400,
						-Math.sin((54+i*72)/180*Math.PI)*r+400);
		}		
		ctx.closePath();
		
		ctx.stroke();
	</script>
</body>
</html>