window.onload = function() {
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext('2d');
    canvas.width = 1200;
    canvas.height = 800;
    //线性渐变参数
    //    var linearGrad = c.createLinearGradient(0, 0, 0, canvas.height);
    //    linearGrad.addColorStop(0.0, 'black');
    //    linearGrad.addColorStop(1.0,'#035');
    //    c.fillStyle = linearGrad;





    //绘制星星
    setInterval(function() {
        var radialGrad = c.createRadialGradient(canvas.width / 2, canvas.height, 0, canvas.width / 2, canvas.height, 800);
        radialGrad.addColorStop(0.0, '#035');
        radialGrad.addColorStop(1.0, 'black');
        c.fillStyle = radialGrad;

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

        for (var i = 0; i < 100; i++) {
            var rot = Math.round(Math.random() * 360);
            //        var r = Math.random() * 10 + 10;
            var x = Math.random() * canvas.width;
            if (x < 20) {
                x = 20;
            } else if (x > canvas.width - 20) {
                x = canvas.width - 20;
            }
            var y = Math.random() * canvas.height * 0.6;
            if (y < 20) {
                y = 20;
            }
            var s = Math.random() * 1.2;
            drawShape(c, rot, s, x, y, '#fd5', '#fb3');
            //环境、旋转角度、坐标X、坐标Y、外圈半径、内圈半径、线宽、线颜色、填充颜色
        }


        //绘制一个月亮
        fillMoon(c, 800, 200, 30, 100, 2, '#fd5');
        //环境，坐标X，坐标Y，旋转角度，直径，参考点

        //绘制一片绿地
        var landColorGrad = c.createLinearGradient(0, 800, 0, 0);
        landColorGrad.addColorStop(0.0, '#030');
        landColorGrad.addColorStop(1.0, '#580');

        var landLh = canvas.height * 30 / 100;
        var landRh = canvas.height * 25 / 100;
        fillLand(c, landLh, landRh, landColorGrad);
        
        //添加文字
        c.font="blod 100 Arial";
        c.fillStyle='white';
        c.fillText("一闪一闪亮晶晶 满天都是小星星",100,400);
        
    }, 500);

    //    依照轨迹绘制形状
    function drawShape(c, rot, s, x, y, lineColor, styleColor) {

        c.save();

        c.translate(x, y);
        c.rotate(rot);
        c.scale(s, s)
            //        c.transform(s,0,0,s,x,y);

        starShape(c);

        c.fillStyle = styleColor;
        c.strokeStyle = lineColor;
        c.lineJoin = 'round';

        c.fill();
        c.stroke();

        c.restore();
    }

    //星星的轨迹
    function starShape(c) {
        c.beginPath();
        for (var i = 0; i < 5; i++) {
            c.lineTo(Math.cos((72 * i) / 180 * Math.PI) * 10, -Math.sin((72 * i) / 180 * Math.PI) * 10);
            c.lineTo(Math.cos((36 + 72 * i) / 180 * Math.PI) * 10 / 2, -Math.sin((36 + 72 * i) / 180 * Math.PI) * 10 / 2);

        }
        c.closePath();
    }

    //填充的月亮
    function fillMoon(c, x, y, rot, R, d, fillColor) {
        c.save();

        c.translate(x, y);
        c.rotate(rot * Math.PI / 180);
        c.scale(R, R);

        pathMoon(c, d);

        c.fillStyle = fillColor || "yellow";

        c.fill();

        c.restore();
    }
    //月亮的轨迹
    function pathMoon(c, d) {
        c.beginPath();
        c.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
        c.moveTo(0, -1);
        c.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
        c.closePath();
    }
    //计算距离的函数
    function dis(x1, y1, x2, y2) {
        return Math.sqrt((x2 - x1) * (x2 - x1) + (y1 - y2) * (y1 - y2));
    }


    //绿地的轨迹
    function pathLand(c, lh, rh) {
        c.beginPath();
        c.lineTo(0, canvas.width);
        c.lineTo(0, canvas.height - lh);
        c.bezierCurveTo(550, 450, 620, 800    , canvas.width, canvas.height - rh);
        c.lineTo(canvas.width, canvas.height);
        c.closePath();

    }
    //填充绿地
    function fillLand(c, lh, rh, fillColor) {
        c.save();
        c.fillStyle = fillColor;
        pathLand(c, lh, rh);
        c.fill();
        c.restore();
    }

    /*
     *    变换矩阵的知识
     *  | a  c  e |      a:水平缩放（默认1）  c:垂直倾斜（默认0）   e:水平位移（默认0）
     *     | b     d  f |      b:水平倾斜（默认0）  d:垂直缩放（默认1）   f:垂直位移（默认0）
     *  | 0  0  1 |
     * 
     * transform(a,b,c,d,e,f);
     * 
     * 
     */

}