HTML5應用——生日快樂動畫之星星

              在講述繪製星星動畫之前，先介紹一點javascript知識。

             面向對象: javascript本質上不是面嚮對象語言，而是腳本語言，一般只適合簡單、代碼量少的程序，因爲腳本過於複雜會直接導致瀏覽器出現異常。 但是javascript還是具有面向對象的特點的。對於多過程、多對象的腳本程序還是建議構建對象，這樣對於腳本的維護、修改和調用都是很方便的。javascript構造對象很簡單，比起java、c++簡單很多， 例如構建一輛汽車的對象:

var Car=function()//構建車的對象
{     this.color="red";  
      this.price=100000;  
      this.length=2.5;  
      this.speed=80;   //車的一些屬性  
      this.x=0;  
      this.updatePos=function()  //更新車位置的方法  
      {    this.x+=this.speed;  
      }
}

構建好對象之後就可以構建對象了，var mycar=new Car();

setInterval()：這是javascript中的定時器函數，有兩個參數，前面是待執行的代碼，後面一個是間隔時間。但是有幾點需要注意的問題。

1：假設有一個函數GetPos()需要用定時器執行，可以setInterval(GetPos,1000)或者setInterval("GetPos()",1000) 如果寫成setInterval(GetPos,1000)一般只會執行一次這個函數，我曾經犯過這個錯誤。

2：在setInterval()中儘量使用全局變量，因爲它重複調用，局部變量容易出錯。

好了，羅嗦了一會兒，我想大家應該都知道這些的。

這個gif圖片中包括了星星對象和文字（後面講述）對象。對於繪製星星，應該充分利用五角星的對稱性。在HTML5 canvas對象中，大家最好要靈活使用座標變換，我把主要的座標變換函數說一下：

save() //保存當前畫布狀態
restore()回覆畫布狀態
translate(x,y) //將畫布中心座標平移至x,y
rotate(angle) //將畫布旋轉angle角度
transform 和setTransform是對畫布矩形進行變換的，比較難用

現在構建星星對象，星星在天空中需要哪些屬性呢？ 一般有座標、亮度、大小、傾斜角度等，我定義的如下

   this.x = -1;
    this.y = -1;  //表示橫縱座標
    this.style = "";
    this.r = -1;
    this.scale = 1; //表示縮放倍數
    this.angle = 0; //旋轉的角度
    this.angle1 = 0; //輔助參數

其次需要繪製星星的方法，前面說過需要利用星星的對稱性，因此實際上只需要繪製五分之一，再利用旋轉就可以繪製全部的圖形了。星星需要填充顏色，HTML5中可以對路徑進行填充，因此可以使用路徑beginPath()和closePath(),但是最後記住使用fill()函數填充的。

例如我繪製五分之一圖形函數：

 this.drawPartStar = function () //部分
    {
        cxt.save();
        cxt.beginPath();
        cxt.lineCap = "round"; cxt.lineWidth = 5;
        cxt.fillStyle = this.style;
        cxt.translate(this.x, this.y); //位移
        cxt.rotate(this.angle1);
        //cxt.globalAlpha = this.alpha; //設置透明度
        cxt.moveTo(0, 0);
        var xx = 0 - this.r * Math.sin(36 / 180 * 3.14);
        var yy = 0 - this.r * Math.cos(36 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        xx = 0;
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14) - this.r * Math.sin(36 / 180 * 3.14) * Math.tan(72 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        xx = this.r * Math.sin(36 / 180 * 3.14);
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        cxt.lineTo(0, 0);
        cxt.closePath();
        cxt.fill();
        cxt.restore();
    }

然後利用畫布旋轉就可以得到整個的圖形了

this.drawStar = function () //繪製完整的花
    {
        for (var i = 0; i <= 4; i++) {
            this.angle1 = i * 72 / 180 * 3.14 + this.angle;
            this.drawPartStar();
        }
    }

關於星星的座標，半徑大小，傾斜角度都可以使用隨機函數實現，利用實現m到n之間的隨機數：

var x=(n-m)*Math.random()+m;

通過合理控制m,n就可以得到需要的值了。

好了，到這裏星星對象創建過程結束，其次需要構建這些星星。 由於星星數目多，可以使用數組對象，每一個數組對象都是一個星星對象：

 var stars = new Array();   //創建星星對象
    var starCount = 40; //星星的數目,默認是40 

for (var m = 0; m < starCount; m++) //
    {
        var s = new star(cxt);
        s.init();stars[m] = s;
    }

最後使用定時器，使星星具有閃爍效果：

 /***************演示閃爍星星的函數**********************/
    function playStars() //演示星星
    {
        for (var n = 0; n < starCount; n++)
       {
        stars[n].getColor();
        stars[n].drawStar();
        }
    }

setInterval("playStars()",500);

這樣，閃爍的星星就全部做完了。

以上就是我說的利用對象構建閃爍星星的過程。大家可以看到利用對象的簡便和獨立性，希望還不熟悉的朋友可以熟悉這種方法。

最後把star.js中關於星星對象的全部代碼寫在這裏供大家參考

/******star.js******/
/****以下是星星的對象**********************************/
var star = function (cxt) //定義星的對象
{
    this.x = -1;
    this.y = -1;  //表示橫縱座標
    this.style = "";
    this.r = -1;
    this.scale = 1; //表示縮放倍數
    this.angle = 0; //旋轉的角度
    this.angle1 = 0; //輔助參數
    this.getPos = function () //獲取隨機座標
    {
        var xx = 20 + 1200 * Math.random();
        var yy = 20 + 250 * Math.random();
        this.x = Math.ceil(xx); this.y = Math.ceil(yy); //獲取了隨機座標
    }
    this.getAngle = function () //得到隨機的角度
    {
        this.angle = Math.random() * Math.PI;
    }
    this.getR = function () //獲取半徑
    {
        var i = 1 + 4 * Math.random();
        this.r = Math.ceil(i); //獲取隨機半徑
    }
    this.getColor = function () //獲取隨機顏色
    {
        var n = Math.random();
        if (n < 0.5)
            this.style = "white";
        else
            this.style = "#BBAAB1"; //灰白色

    }
    this.drawPartStar = function () //部分
    {
        cxt.save();
        cxt.beginPath();
        cxt.lineCap = "round"; cxt.lineWidth = 5;
        cxt.fillStyle = this.style;
        cxt.translate(this.x, this.y); //位移
        cxt.rotate(this.angle1);
        //cxt.globalAlpha = this.alpha; //設置透明度
        cxt.moveTo(0, 0);
        var xx = 0 - this.r * Math.sin(36 / 180 * 3.14);
        var yy = 0 - this.r * Math.cos(36 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        xx = 0;
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14) - this.r * Math.sin(36 / 180 * 3.14) * Math.tan(72 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        xx = this.r * Math.sin(36 / 180 * 3.14);
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14);
        cxt.lineTo(xx, yy);
        cxt.lineTo(0, 0);
        cxt.closePath();
        cxt.fill();
        cxt.restore();
    }
    this.drawStar = function () //繪製完整的花
    {
        for (var i = 0; i <= 4; i++) {
            this.angle1 = i * 72 / 180 * 3.14 + this.angle;
            this.drawPartStar();
        }
    }
    this.init = function ()  //初始化函數
    {
        this.getPos();
        this.getR();
        this.getColor();
        this.getAngle();
    }
}
/*****************以上是星星的對象**************************/