window.onload = function(){
    var canvas = document.getElementById('canvas');
    canvas.width = 1240;
    canvas.height = 600;
    
    var context = canvas.getContext('2d');
    
    //var linearGrad = context.createLinearGradient(0,0,0,1240);
    var linearGrad = context.createRadialGradient(canvas.width/2,canvas.height,0,
                                                canvas.width/2,canvas.height,canvas.height);
    linearGrad.addColorStop(0.0,'#035');
    linearGrad.addColorStop(1.0,'black');
    context.fillStyle = linearGrad;
    
    context.fillRect(0,0,canvas.width,canvas.height);
    /*context.lineWidth = 10;
    context.lineJoin ='miter';
    context.miterLimit = 10;*/    //context.lineJoin='miter'时才有效
    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;
        drawStar(context,x,y,r,a);
        }
    }
function drawStar(cxt,x,y,R,rot){
    cxt.save();
    
    cxt.translate(x,y);
    cxt.rotate(rot/180*Math.PI);
    cxt.scale(R,R);
    starpath(cxt);
    
    cxt.fillStyle = '#fb3';
    //cxt.strokeStyle = '#fd5';
    //cxt.lineWidth = 3;
    //cxt.lineJoin='round';
    
    cxt.fill();
    //cxt.stroke();
    cxt.restore();
    }
    
function starpath(cxt){
    cxt.beginPath();
    for(var i=0;i<5;i++){
        cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                -Math.sin((18+i*72)/180*Math.PI));
        cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                  -Math.sin((54+i*72)/180*Math.PI))*0.5;
    cxt.closePath();
    }}