javascript元素球形排列 (js写五角星)

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

你知道五星红旗上的五角星代表着什么吗？（答案见文章末尾）

js写五角星,用javascript输出数字图案

五角星

今天我们先来用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>

运行效果如图：

js写五角星,用javascript输出数字图案

五角星

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

五星红旗，我们永远的骄傲，我们为你自豪！