window.onload?=?function()?{
????var?canvas?=?document.getElementById("canvas");
????var?c?=?canvas.getContext('2d');
????canvas.width?=?1200;
????canvas.height?=?800;
????//線性漸變參數(shù)
????//????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');
????????????//環(huán)境、旋轉(zhuǎn)角度、坐標(biāo)X、坐標(biāo)Y、外圈半徑、內(nèi)圈半徑、線寬、線顏色、填充顏色
????????}


????????//繪制一個(gè)月亮
????????fillMoon(c,?800,?200,?30,?100,?2,?'#fd5');
????????//環(huán)境，坐標(biāo)X，坐標(biāo)Y，旋轉(zhuǎn)角度，直徑，參考點(diǎn)

????????//繪制一片綠地
????????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();
????}
????//計(jì)算距離的函數(shù)
????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();
????}

????/*
?????*????變換矩陣的知識(shí)
?????*??|?a??c??e?|??????a:水平縮放（默認(rèn)1）??c:垂直傾斜（默認(rèn)0）???e:水平位移（默認(rèn)0）
?????*?????|?b?????d??f?|??????b:水平傾斜（默認(rèn)0）??d:垂直縮放（默認(rèn)1）???f:垂直位移（默認(rèn)0）
?????*??|?0??0??1?|
?????*?
?????*?transform(a,b,c,d,e,f);
?????*?
?????*?
?????*/

}