HTML5 And JS繪製流星雨

      

       流星雨……

     熟悉HTML5的朋友們應該知道HTML5具有強大的繪圖和渲染能力，HTML5配合js的使用比起svg等技術有過之而無不及，而且HTML5圖形開發過程也比較簡單。 繪製動態的圖形算是動畫了，當然可以利用Flash實現，但是需要插件支持。下面就簡單介紹下HTML5編寫動畫的過程。

      首先：先不講技術的東西，說說技術與藝術。我覺得在IT領域技術好而缺乏藝術創意，是個好員工，難聽點叫代碼民工；具有一定藝術創造能力纔可能實現技術上的突破。因爲技術經過實踐與積累總是可以達到，但是藝術是來自於個人的世界觀和審美觀，這是無法替代與學到的，因此我們教授經常告誡我們不要老是啃技術性的書，多看看、聽聽建築學、美學和哲學老師們的書和課。 Jobs應該是很好的例子，他的ipad iphone是技術與藝術的結合體，這種創意是很難被其他IT公司複製的。

       話說的有些多，但卻是覺得比較重要。 老師們常說，如今想要在IT領域創業並且生存下去，就需要一種無法被別人複製的觀念與創意，而不單單是某種技術。大家可以在谷歌圖片、必應圖片和百度圖片裏面搜索"javascript"詞語，就能發現小到算法，大到文化的公司差距……也就能看到谷歌爲什麼能夠成爲巨頭。

    

    話說到這裏，大家肯定都看過流星之類的照片或實際景象，但是如何勾畫起來呢？ 有些時候看起來常見的東西，仔細分析起來還確實不易，這需要細心觀察。 例如，你知道從你辦公樓或住處的樓底到辦公室或者公寓的階梯數目嗎？流星是小隕石墜入大氣燃燒的現象，因此應該頭部明亮，尾部有餘光的，如果想做的絢麗，中間可以加點顏色。這樣流星的模型就出來了。

    其次，回到本文主題，說說技術性的東西吧！

         對於整體性的事物常常採用面向對象技術，關於js面向對象可以參看我的《HTML5應用——生日快樂動畫之星星》，裏面簡單介紹了一些。 任何一個具體的事物都有屬性，如人有姓名、年齡 等。 因此，流星有速度、顏色、長度等基本屬性。

   例如我定義的屬性

   

    this.x = -1;
    this.y = -1;
    this.length = -1;
    this.width = -1;
    this.speed = -1;
    this.alpha = 1; //透明度
    this.angle = -1; //以上參數分別表示了流星的座標、速度和長度
    this.color1 = "";
    this.color2 = "";  //流星的色彩

      一個事物存在總需要有所行爲，這種行爲就是面向對象的方法了。 例如流星需要移動位置，繪製自己

     例如流星獲取一個隨機顏色，這是中間部分的顏色，頭部必須是白色的

 

/**************獲取隨機顏色函數*****************/
    this.getRandomColor = function () //
    {
        var a = 255 * Math.random(); a = Math.ceil(a);
        var a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        var a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color1 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        a = 255 * Math.random(); a = Math.ceil(a);
        a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color2 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        //this.color1 = "white";
        this.color2 = "black";
    }

      然後移動過程中需要更新自己的座標

   

 /***************重新計算流星座標的函數******************/
    this.countPos = function ()//
    {
        this.x = this.x - this.speed * Math.cos(this.angle * 3.14 / 180);
        this.y = this.y + this.speed * Math.sin(this.angle * 3.14 / 180);
    }
    /*****************獲取隨機座標的函數*****************/
    this.getPos = function () //
    {
        var x = Math.random() * 1000 + 200;
        this.x = Math.ceil(x);
        x = Math.random() * 200;
        this.y = Math.ceil(x);
        this.width = 5;  //假設流星寬度是15
        x = Math.random() * 80 + 120;
        this.length = Math.ceil(x);
        this.angle = 30; //假設流星傾斜角30
        this.speed = 1; //假設流星的速度
    }

    還需要不斷的繪製自己

   

 /****繪製單個流星***************************/
    this.drawSingleMeteor = function () //繪製一個流星的函數
    {
        cxt.save();
        cxt.beginPath();
        cxt.lineWidth = this.width;
        cxt.globalAlpha = this.alpha; //設置透明度
        var line = cxt.createLinearGradient(this.x, this.y, this.x + this.length * Math.cos(this.angle * 3.14 / 180), this.y - this.length * Math.sin(this.angle * 3.14 / 180)); //創建煙花的橫向漸變顏色
        line.addColorStop(0, "white");
        line.addColorStop(0.1, this.color1);
        line.addColorStop(0.6, this.color2);
        cxt.strokeStyle = line;
        cxt.moveTo(this.x, this.y);
        cxt.lineTo(this.x + this.length * Math.cos(this.angle * 3.14 / 180), this.y - this.length * Math.sin(this.angle * 3.14 / 180));
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }

    在誕生的時候初始化

/****************初始化函數********************/
    this.init = function () //初始化
    {
        this.getPos();
        this.alpha = 1;
        this.getRandomColor();
    }

                       這樣一個完整的流星對象做好了

   最後，需要做許多的流星，並且成有序的運動

所以需要定義存儲星星的數組，

var Meteors = new Array(); //流星的數量
var MeteorCount = 1; //流星的數量

利用js的setInterval()函數設置定時器不斷更新就好了。

 MeteorCount = 20;
        for (var i = 0; i < MeteorCount; i++) //;
        {
            Meteors[i] = new meteor(cxt);
            Meteors[i].init();//初始化
        }

/*************演示流星的函數***********************/
function playMeteors() //流星
{
    for (var i = 0; i < MeteorCount; i++) //循環處理
    {
        var w=Meteors[i].speed*Math.cos(Meteors[i].angle*3.14/180);
        var h=Meteors[i].speed*Math.sin(Meteors[i].angle*3.14/180);
        cxt.clearRect(Meteors[i].x+Meteors[i].length*Math.cos(Meteors[i].angle*3.14/180)-6*w,Meteors[i].y-Meteors[i].length*Math.sin(Meteors[i].angle*3.14/180)-6*h,10*w,10*h);
        Meteors[i].drawSingleMeteor();
        Meteors[i].countPos();
        Meteors[i].alpha -= 0.002;
        if (Meteors[i].y>320||Meteors[i].alpha<=0.01) //到達下線
        {
            cxt.clearRect(Meteors[i].x - 1, Meteors[i].y - Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180), Meteors[i].length * Math.cos(Meteors[i].angle * 3.14 / 180)+2, Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180)+2);
            Meteors[i] = new meteor(cxt);
            Meteors[i].init();
        }
    }
}
/***************************************************************************/

        整個過程全部完成了，希望給初學者有所幫助，對於不足也請大家指出。

          

             

                       懶於奮鬥的軀體是徒有虛名的擺設

                                   懶於思考的大腦是寸草不生的荒漠