<canvas id="star" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas> 

   //一片星空

    function starTwo() {

        var canvas = document.getElementById("star");

        canvas.width = 1200;

        canvas.height = 800;

        var context = canvas.getContext("2d");

        var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);

        skyStyle.addColorStop(0.0, "#000");

        skyStyle.addColorStop(1.0, "#035");

        context.fillStyle = skyStyle;

        context.fillRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < 200; i++) {

            var r = Math.random() * 5 + 5;

            var x = Math.random() * canvas.width;

            var y = Math.random() * canvas.height*0.65;

            var a = Math.random() * 360;

            drawStarTwo(context, x, y, r, a);

        }

    }

    //绘制五角星

    function drawStarTwo(cxt, x, y, R, rot) {

        cxt.save();

        cxt.rotate(rot / 180 * Math.PI);

        cxt.translate(x, y);

        //cxt.scale(R, R);

        starPath(cxt);

        cxt.fillStyle = "#fb3";

        cxt.fill();

        cxt.restore();

        //绘制出在（x,y）,大小为R，旋转rot度的五角星

    }

    function starPath(cxt) {

        cxt.beginPath();

        for (var i = 0; i < 5; i++) {

            cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI)*20 , -Math.sin((18 + i * 72 ) / 180 * Math.PI)*20);

            cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5*20, -Math.sin((54 + i * 72 ) / 180 * Math.PI) *0.5*20);

        }

        cxt.closePath();

    }

    window.onload = function () {

        starTwo();

    }