效果图
五角星计算方式
代码
<body style="margin:0px;padding:0px;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>