HTML5+JS繪制流星雨的示例代碼分享

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:11:17

HTML5+JS繪制流星雨的示例代碼分享

HTML5+JS繪制流星雨的示例代碼分享: 流星雨…… 熟悉HTML5的朋友們應(yīng)該知道HTML5具有強大的繪圖和渲染能力，HTML5配合js的使用比起svg等技術(shù)有過之而無不及，而且HTML5圖形開發(fā)過程也比較簡單。繪制動態(tài)的圖形算是動畫了，當(dāng)然可以利用Flash實現(xiàn)，但是需要插件支持。下面就簡單介紹下HTM

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀HTML5+JS繪制流星雨的示例代碼分享: 流星雨…… 熟悉HTML5的朋友們應(yīng)該知道HTML5具有強大的繪圖和渲染能力，HTML5配合js的使用比起svg等技術(shù)有過之而無不及，而且HTML5圖形開發(fā)過程也比較簡單。繪制動態(tài)的圖形算是動畫了，當(dāng)然可以利用Flash實現(xiàn)，但是需要插件支持。下面就簡單介紹下HTM

流星雨……

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

首先：先不講技術(shù)的東西，說說技術(shù)與藝術(shù)。我覺得在IT領(lǐng)域技術(shù)好而缺乏藝術(shù)創(chuàng)意，是個好員工，難聽點叫代碼民工；具有一定藝術(shù)創(chuàng)造能力才可能實現(xiàn)技術(shù)上的突破。因為技術(shù)經(jīng)過實踐與積累總是可以達到，但是藝術(shù)是來自于個人的世界觀和審美觀，這是無法替代與學(xué)到的，因此我們教授經(jīng)常告誡我們不要老是啃技術(shù)性的書，多看看、聽聽建筑學(xué)、美學(xué)和哲學(xué)老師們的書和課。 Jobs應(yīng)該是很好的例子，他的ipad iphone是技術(shù)與藝術(shù)的結(jié)合體，這種創(chuàng)意是很難被其他IT公司復(fù)制的。

話說的有些多，但卻是覺得比較重要。老師們常說，如今想要在IT領(lǐng)域創(chuàng)業(yè)并且生存下去，就需要一種無法被別人復(fù)制的觀念與創(chuàng)意，而不單單是某種技術(shù)。大家可以在谷歌圖片、必應(yīng)圖片和百度圖片里面搜索"javascript"詞語，就能發(fā)現(xiàn)小到算法，大到文化的公司差距……也就能看到谷歌為什么能夠成為巨頭。

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

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

對于整體性的事物常常采用面向?qū)ο蠹夹g(shù)，關(guān)于js面向?qū)ο罂梢詤⒖次业摹禜TML5應(yīng)用——生日快樂動畫之星星》，里面簡單介紹了一些。任何一個具體的事物都有屬性，如人有姓名、年齡等。因此，流星有速度、顏色、長度等基本屬性。

例如我定義的屬性

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

一個事物存在總需要有所行為，這種行為就是面向?qū)ο蟮姆椒恕?例如流星需要移動位置，繪制自己

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

/**************獲取隨機顏色函數(shù)*****************/
 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";
 }

然后移動過程中需要更新自己的坐標

 /***************重新計算流星坐標的函數(shù)******************/
 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);
 }
 /*****************獲取隨機坐標的函數(shù)*****************/
 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; //假設(shè)流星寬度是15
 x = Math.random() * 80 + 120;
 this.length = Math.ceil(x);
 this.angle = 30; //假設(shè)流星傾斜角30
 this.speed = 1; //假設(shè)流星的速度
 }

還需要不斷的繪制自己

 /****繪制單個流星***************************/
 this.drawSingleMeteor = function () //繪制一個流星的函數(shù)
 {
 cxt.save();
 cxt.beginPath();
 cxt.lineWidth = this.width;
 cxt.globalAlpha = this.alpha; //設(shè)置透明度
 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)); //創(chuàng)建煙花的橫向漸變顏色
 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();
 }

在誕生的時候初始化

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

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

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

所以需要定義存儲星星的數(shù)組，

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

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

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

/*************演示流星的函數(shù)***********************/
function playMeteors() //流星
{
 for (var i = 0; i < MeteorCount; i++) //循環(huán)處理
 {
 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();
 }
 }
}
/***************************************************************************/

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5+JS繪制流星雨的示例代碼分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：分享代碼 html5

熱門焦點

HTML5+JS繪制流星雨的示例代碼分享

HTML5+JS繪制流星雨的示例代碼分享

HTML5+JS繪制流星雨的示例代碼分享

最新推薦

猜你喜歡

熱門推薦