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'時(shí)才有效
?? ?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();
?? ?}}