果圖

各位長友大家早上好！

今天給各位帶來的是 HTML5+JS全屏星空特效源碼！

有想要文件版源碼的可以私聊小編哦！

廢話不多說，上源碼！

CSS：

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代碼

Javascript代碼

首先我們需要定義一些常量，比如畫布的寬和高，星星數量，流星個數。在這個星空中流星其實是星星的一個，只是添加了動態效果。

頁面初始化

然后是設定一個定時器，通過一段隨機時間生成一個流星的索引號。

流星索引號

緊接著來看看生成一個星星的方法，該方法返回一個星星的各項參數，包括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

小球直線運動

首先我們來看看小球直線運動的效果圖，如下所示。

運動效果圖

然后我們來分析下，這個效果是如何實現的。

1. 首先設置畫布寬高等信息，然后利用canvas畫出一個小球，設定初始狀態，包括顏色，半徑，初始位置等信息。

2. 設定一個定時器，每次動態更新小球的位置，由于定時器時間比較短，肉眼觀察下，相當于小球運動的效果。

通過上述的分析，我們得出以下的代碼。

對于canvas頁面的HTML代碼永遠都只包含一個元素。

HTML代碼

接下來是主要的Javascript代碼，首先是畫布，小球初始信息的設置，并設置定時器函數。

小球初始信息

然后是執行的定時器函數，動態更新小球的位置，當小球運動出畫布范圍后，重新從起點位置開始運動。

定時器函數

就這兩段代碼，就可以實現出以上的小球勻速直線運動的效果。

小球圓周運動

首先，我們來看看小球勻速圓周運動的效果圖，如下所示。

運動效果圖

接下來我們同樣來分析下這個效果是如何實現的。

1. 首先畫出兩個小圓，一個是藍色，一個是紅色，設定初始信息和上述例子一樣。

2. 設定定時器，每次清除畫布后，重新渲染，并且更新小藍球的位置，由于是圓周運動，并不會出現上述例子中移出畫布的情況。

通過上面的描述，我們得出以下代碼，HTML代碼一樣，這里不再給出。

首先是原始小藍球的繪制，并設置定時器。

小藍球的繪制

然后是小紅球的繪制。

小紅球的繪制

最后是定時器函數的實現，在該函數中會讓小藍球旋轉一定的角度。

定時器函數

至此，小球的勻速圓周運動效果代碼就完全實現了。

總結

今天這篇文章主要是利用HTML5的canvas實現了一些簡單的小球運動效果，你學會了嗎？