利用html5画出五角星画出星空

最新推荐文章于 2024-03-15 18:49:34 发布

蔚蓝balala

最新推荐文章于 2024-03-15 18:49:34 发布

阅读量4.9k

点赞数 2

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

本文链接：https://blog.csdn.net/Ailey_YY/article/details/41216047

版权

html5-canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用html5画出五角星

（在慕课网学习<canvas>标签后代码总结）

五角星的格定点坐标该如何定位？原理图如下：

源代码：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="canvas" width="600" height="600" style="border:1px solid #c3c3c3;">
</canvas>

<script type="text/javascript">

window.onload = function(){
	var canvas = document.getElementById("canvas");
	var context=canvas.getContext("2d"); 

	//绘制和画布一样大小的黑色矩形
	context.fillStyle = "black";
	context.fillRect(0,0,canvas.width,canvas.height);
	
	
	//调用构造五角星函数,并随机产生多个五角星
	for(var i = 0;i < 130;i++){
		//随机大圆半径
		var r = Math.random() * 10 + 10;    
		var x =Math.random() * canvas.width;
		var y =Math.random() * canvas.height;
		//随机旋转角0-360
		var a =Math.random() * 360;
		drawstar(context,x,y,r,r/2.0,a);

	}

}	

//定义五角星函数,注意在javascript中三角函数要求角度转换为弧度,x,y为五角星的偏移量,rot为图形旋转角度
	function drawstar(cxt,x,y,outerR,innnerR,rot){
		cxt.beginPath();
		for(var i = 0;i < 5;i ++){
			cxt.lineTo(Math.cos((18 + i * 72 - rot)/180 *Math.PI)*outerR + x,-Math.sin((18 + i * 72 - rot)/180*Math.PI)*outerR + y);
			cxt.lineTo(Math.cos((54 + i * 72 - rot)/180 *Math.PI)*innnerR + x,-Math.sin((54 + i * 72 - rot)/180*Math.PI)*innnerR + y);
		}
	
		cxt.closePath();
		
		//状态
		cxt.fillStyle = "#fd5";
		cxt.strokeStyle = "#fb5";
		cxt.lineWidth = 3;
		cxt.lineJoin = "round";
		
		//执行
		cxt.fill();
		cxt.stroke();
	}

</script>

</body>
</html>

星空效果图：