星空画布（刷新星星随机）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
		    <canvas id="canvas" style="border: 1px solid #aaa" width="1920" height="962">
		        你的浏览器不支持canvas，请更换浏览器再试!
		    </canvas>
		    <script>
		        var c=document.getElementById("canvas");
		        c.width=document.body.clientWidth;
		        c.height=document.body.clientHeight;
		
		        window.onload=function(){
		            if(c.getContext("2d")){
		                var cxt= c.getContext("2d");
		            }else{
		                document.write("你的浏览器不支持canvas，请更换浏览器再试!");
		            }
		            //星空背景颜色
		            var linearCrad=cxt.createLinearGradient(0,0,0, c.height* 0.68);
		            linearCrad.addColorStop(0.0, '#7ac4e1');
		            linearCrad.addColorStop(0.2, '#5eb8dd');
		            linearCrad.addColorStop(1.0, '#b6e2e5');
		            cxt.fillStyle=linearCrad;
		            cxt.fillRect(0,0, c.width, c.height);
		            //循环绘制100颗星星
		            for(var i=0 ; i<100 ; i++){
		                var r=Math.random() * 6 + 2;//半径
		                var x=Math.random() * c.width * 0.98 ; // x偏移量
		                var y=Math.random() * c.height * 0.6; //y偏移量
		                var a=Math.random() * 360; //旋转角度
		                drawStart(cxt , r/2.0 , r , x , y , a);
		            }
		            //月亮
		            fillMoon(cxt ,2, c.width * 0.88 , c.height * 0.24 ,100 ,20 , "#fff");
		            //绿地
		            drawLand(cxt);
		        }
		        /*
		        * cxt:绘图环境
		        * r：小圆半径
		        * R：大圆半径
		        * x：x轴偏移量
		        * y：y轴偏移量
		        * rot：旋转角度（逆时针）*/
		        function drawStart(cxt,r,R,x,y,rot){
		            cxt.beginPath();
		            cxt.fillStyle="#fff"
		            cxt.strokeStyle="#88b9dd";
		            for(var i=0 ; i < 5 ;i++){
		                cxt.lineTo( Math.cos((18+ i*72 - rot )/180 * Math.PI) * R + x//大圆
		                        , -Math.sin((18 + i*72 - rot)/180 *Math.PI) * R + y);
		                cxt.lineTo( Math.cos((54+ i*72 - rot )/180 * Math.PI) * r + x//小圆
		                        , -Math.sin((54 + i*72 - rot)/180 *Math.PI) * r + y);
		            }
		            cxt.closePath();
		            cxt.fill();
		            cxt.stroke();
		        }
		        /*
		         *参数说明
		         *R: 半径
		         * rot：旋转角度
		         *fillColor: 填充颜色
		         * */
		        function fillMoon(cxt ,d , x , y , R , rot , fillColor){
		            cxt.save();
		            cxt.translate(x , y);
		            cxt.rotate(rot * Math.PI / 180);
		            cxt.scale(R , R);
		            pathMoon(cxt , d);
		            cxt.fillStyle=fillColor || "#fb5";
		            cxt.shadowColor = "rgba(58,88,124,0.5)";
		            cxt.shadowOffsetX = 14 ;
		            cxt.shadowOffsetY = 14;
		            cxt.shadowBlur = 30;
		            cxt.fill();
		
		            cxt.restore();
		        }
		        /*
		         d ：坐标
		         */
		        function pathMoon(cxt , d){
		            cxt.beginPath();
		            /*
		             *圆心（0,0）
		             *半径：1
		             * */
		            cxt.arc(0 , 0 , 1 , 0.5 * Math.PI , 1.5 * Math.PI , true);
		            cxt.moveTo(0 , -1);
		            cxt.arcTo(d , 0 , 0 , 1 , dis(0 , -1 , d , 0) / d);
		            cxt.closePath();
		        }
		        function dis(x1 , y1 ,x2 , y2){
		            return Math.sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) );
		        }
		
		        /*
		        * 绿地
		        * */
		        function drawLand(cxt){
		            cxt.save();
		            cxt.beginPath();
		            cxt.moveTo(0 , c.height * 0.7);
		            /*cxt.bezierCurveTo(540 , 400 , 660 , 800 , 1200 , 600);*/
		            cxt.bezierCurveTo(c.width * 0.4 , c.height * 0.5 , c.width * 0.5 , c.height * 0.9 , c.width  , c.height * 0.8);
		            cxt.lineTo(c.width , c.height);
		            cxt.lineTo(0 , c.height);
		            cxt.closePath();
		            //添加渐变
		            var landStyle = cxt.createLinearGradient(0 , 800 , 0 ,0);
		            landStyle.addColorStop(0.0 ,'#7dbf44');
		            landStyle.addColorStop(0.2 ,'#b9d532');
		            landStyle.addColorStop(1 ,'#79bd46');
		            cxt.fillStyle=landStyle;
		            cxt.fill();
		            cxt.restore();
		        }
		     </script>
		</body>
	</body>
</html>
在这里插入图片描述
星空画布（刷新星星随机）

猜你喜欢
