果圖
各位長友大家早上好!
今天給各位帶來的是 HTML5+JS全屏星空特效源碼!
有想要文件版源碼的可以私聊小編哦!
廢話不多說,上源碼!
body {margin:0 auto;overflow:hidden;}
/*=============第一頁=============*/
.header{
margin:0 auto;
width:100%;
height:640px;
background-color:#000;
position:relative;
}
隨著HTML5的火熱,越來越多的人投入到HTML5開發中了,canvas作為HTML5中比較重要的一個元素,在很多官網的主頁面中被使用到。今天我們一起來看看如何使用canvas畫出一個夢幻的星空背景,還會有流星運動。
本文的代碼已經放到Github上了,感興趣的可以自取,Github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/starry/starry.html
HTML5
首先我們來看看通過canvas實現的星空效果圖,如下所示。
效果圖
接下來我們看看這個效果是如何通過代碼一步步實現的。
首先來看看頁面上的HTML代碼,只有一個Div元素。
HTML代碼
首先我們需要定義一些常量,比如畫布的寬和高,星星數量,流星個數。在這個星空中流星其實是星星的一個,只是添加了動態效果。
頁面初始化
然后是設定一個定時器,通過一段隨機時間生成一個流星的索引號。
流星索引號
緊接著來看看生成一個星星的方法,該方法返回一個星星的各項參數,包括x,y軸坐標,透明度,x,y軸偏移量。
生成星星的參數
然后是最重要的render方法,通過該方法可以將星星渲染至畫布上,我們將這個方法拆開看,首先是對流星的繪制,流星索引號通過上面metor方法獲得。
畫流星
然后是對于星星各項參數的處理,比如有的星星生成的點坐標超出了屏幕寬高,有的透明度是負數,都要將其處理成正常參數。
各項參數判斷
最后是在畫布中進行繪制。
畫布繪制
至此,這個畫面效果的講解完畢,如果代碼正確的話,就可以看到文中出現的效果圖。
今天這篇文章主要是借助HTML5中的canvas畫出了一個夢幻星空的效果,你學會了嗎?
在之前的一篇文章《用HTML5的canvas來畫一個夢幻星空,來學習一下吧》中,我們使用HTML5的canvas畫出了一個夢幻星空的效果。今天這篇文章我們繼續使用canvas來畫出幾個簡單的小球運動效果,一起來看看吧。
本文源碼已經開源到Github上,感興趣的可以自取,Github地址如下。
https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas
HTML5
首先我們來看看小球直線運動的效果圖,如下所示。
運動效果圖
然后我們來分析下,這個效果是如何實現的。
首先設置畫布寬高等信息,然后利用canvas畫出一個小球,設定初始狀態,包括顏色,半徑,初始位置等信息。
設定一個定時器,每次動態更新小球的位置,由于定時器時間比較短,肉眼觀察下,相當于小球運動的效果。
通過上述的分析,我們得出以下的代碼。
對于canvas頁面的HTML代碼永遠都只包含一個元素。
HTML代碼
接下來是主要的Javascript代碼,首先是畫布,小球初始信息的設置,并設置定時器函數。
小球初始信息
然后是執行的定時器函數,動態更新小球的位置,當小球運動出畫布范圍后,重新從起點位置開始運動。
定時器函數
就這兩段代碼,就可以實現出以上的小球勻速直線運動的效果。
首先,我們來看看小球勻速圓周運動的效果圖,如下所示。
運動效果圖
接下來我們同樣來分析下這個效果是如何實現的。
首先畫出兩個小圓,一個是藍色,一個是紅色,設定初始信息和上述例子一樣。
設定定時器,每次清除畫布后,重新渲染,并且更新小藍球的位置,由于是圓周運動,并不會出現上述例子中移出畫布的情況。
通過上面的描述,我們得出以下代碼,HTML代碼一樣,這里不再給出。
首先是原始小藍球的繪制,并設置定時器。
小藍球的繪制
然后是小紅球的繪制。
小紅球的繪制
最后是定時器函數的實現,在該函數中會讓小藍球旋轉一定的角度。
定時器函數
至此,小球的勻速圓周運動效果代碼就完全實現了。
今天這篇文章主要是利用HTML5的canvas實現了一些簡單的小球運動效果,你學會了嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。