使用canvas绘制一片星空

效果图
五角星计算方式
代码
<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>