热门标签:
首页 > 常识 >

五角星的角是多少度(Javascript图形:五角星)

100次浏览     发布时间:2024-11-10 09:19:20    

五星红旗迎风飘扬,胜利歌声多么嘹亮……

你知道五星红旗上的五角星代表着什么吗?(答案见文章末尾)


五角星

今天我们先来用javacript绘制一下五角星。


【思路】

五角星五个角的总度数为180度,所以每个角的度数是36度。根据三角余弦就可以算出每条边的长度和起始点。

【代码】

<body onload='draw()'>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script type="text/javascript">

	function draw() {
	 
		var canvas = document.getElementById("myCanvas");   
		var context = canvas.getContext("2d");   
		context.beginPath();
		
		//设置各个顶点的坐标,根据顶点制定路径   
		for (var i = 0; i < 5; i++) {   
			context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
							-Math.sin((18+i*72)/180*Math.PI)*200+200);   
			context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
							 -Math.sin((54+i*72)/180*Math.PI)*80+200);   
		}   
		context.closePath();   
		
		//设置边框样式以及填充颜色   
		context.lineWidth="3";   
		context.fillStyle = "#F6F152";   
		context.strokeStyle = "#F5270B";   
		context.fill();   
		context.stroke();   

	}

</script>

</body>

运行效果如图:

五角星


五星红旗上的五颗五角星拱卫图形和相互关系象征共产党领导下的革命人民大团结,最大的星星代表中国共产党,四颗小星代表工人、农民、知识分子、民族资产阶级(即“工、农、士、商”)。

五星红旗,我们永远的骄傲,我们为你自豪!

相关文章