Canvas從0開始（三）

前面講了一些canvas的基礎知識

下面就來一步步實現下面這個效果

分析一下這個效果：

第一部分：背景+顏色漸變（css）

第二部分：動（js）

//背景 //遮罩層 //canvas

第一部分：背景+漸變背景往往是純色的或者是漸變的，再或者就是有規律的可以平鋪的圖形。為了適配所有的裝置，盡可能讓所有的裝置都能夠顯示出相同的效果，不能相差太遠，這種情況就只能將背景設定為單一的顏色，或者兩種顏色（漸變），再或者一些可平鋪的圖案，讓其在各個終端下都有相同的顯示效果。漸變取值可以參照uigradients

這個效果裡面的背景是一張

顏色漸變可以用canvas和css來實現，這裡就用css來實現

將 body 的顏色設定為黑色到藍色的由上向下的漸變：

背景顏色動態變化設定乙個全屏的遮罩，將這個遮罩的背景色設定為紅色，然後使用 css3 的 animation 屬性，使用 animation 改變其透明度，由 0 變為 0.9。

.filter 
@keyframes colorchange 
50% 
}

到這裡漸變的背景就完成了

第二部分：動（js）

隨機粒子

看看這個效果

這些粒子都是隨機生成的

在建立了乙個全屏的 canvas 之後，建立 round_item 類。我們要設定的是位置隨機、透明度隨機、半徑隨機的圓。為了區分不同的圓，我們還應該設定乙個唯一的 index 引數。

所以需要的引數有：

x 座標

y 座標

半徑透明度

index

function round_item(index,x,y)

使用了建構函式的方式來建立單個的圓，我們還需要乙個變數 initroundpopulation 來設定 round 的個數，然後我們便可以通過 for 迴圈建立出 initroundpopulation 個圓。

round_item.prototype.draw=function();

function init()
requestanimationframe(animate);
}

將 move() 方法寫在 round_item 的原型上，這樣我們建立的每乙個 round 都具有了 move() 方法。

在 move() 方法中，我們只需要改變 round 的 y 座標即可，並且設定邊界條件，當 y 座標的值小於 -10（也可以是其他負值），代表該 round 已經超出了螢幕，這個時候我們要將其移動到螢幕的最底端，這樣才能保證我們建立的粒子數不變，一直是 initroundpopulation 的值。

在 y 座標的變化之後，我們還需要使用新的 y 座標再來重新繪製一下該 round。

round_item.prototype.move = function () 
this.draw();
};

滑鼠和螢幕互動完整**如下：

Canvas從0開始（三）

從0開始二

VC usb程式設計從0開始

機器學習從0開始

Canvas從0開始（三）

從0開始 二

VC usb程式設計從0開始

機器學習 從0開始

相關推薦

從0開始二

機器學習從0開始