神奇的 Canvas

依然愛幽默發表於2019-03-01
Canvas

最近在瀏覽掘金網站的時候看到掘金小冊中有一個很有（便）意（宜）思的冊子:如何使用 Canvas 製作出炫酷的網頁背景特效，便想到給我的部落格新增一個炫酷的背景。順便學習一下 canvas 這個元素的使用。

效果

最終效果就在部落格上就能看到啦。下面來說一下實現方式。

實現

建議對 canvas 還不瞭解的同學去掘金小冊上學習學習，我這裡不再講解。

我的部落格是用 Hexo 搭建的，使用了 Archer 主題，部落格的最上層樣式作者定義在 layout.ejs 檔案裡。

<!DOCTYPE html>
<html>
   ...
    <div class="wrapper">
        ...
    </div>
    ...
</html>
複製程式碼

既然是在 canvas 裡面畫炫酷的背景，那就需要在這裡新增一個 canvas 元素，並且和 div:class=”wrapper” 一樣大。

改造 layout.ejs 檔案，用一個 div 將 div:class=”wrapper” 和我們的 canvas 包裹起來：

<!DOCTYPE html>
<html>
    ...
    <div id="container-wrapper-canvas" style="position:relative;">
        <div class="wrapper">
        ...
        </div>
        <canvas id="myCanvas" style="position:absolute;left:0;top:0;z-index:0;pointer-events:none;" />
        <script>
        </script>
        ...
    </div>
    ...
</html>
複製程式碼

因為不想讓 canvas 響應點選事件，所以在它的 style 裡面加上：

pointer-events:none;
複製程式碼

先定義一些變數（以下程式碼一股腦塞到 script 標籤裡就行啦）。

// 螢幕寬高
let container = document.getElementById(`container-wrapper-canvas`)
let WIDTH = container.offsetWidth
let HEIGHT = container.offsetHeight
// canvas
let canvas = document.getElementById(`myCanvas`)
let context = canvas.getContext(`2d`)
// 圓點數量
let roundCount = HEIGHT / 10
// 存放遠點屬性的陣列
let round = []

// 令 canvas 鋪滿螢幕
canvas.width = WIDTH
canvas.height = HEIGHT
複製程式碼

構造圓點位置顏色大小等屬性

// 構造圓點位置顏色大小等屬性
function roundItem(index, x, y) {
    this.index = index
    this.x = x
    this.y = y
    this.r = Math.random() * 4 + 1
    let alpha = (Math.floor(Math.random() * 5) + 1) / 10 / 2
    this.color = "rgba(0,0,0," + alpha + ")"
}
複製程式碼

畫圓點

// 畫圓點
roundItem.prototype.draw = function() {
    context.fillStyle = this.color
    context.shadowBlur = this.r * 2
    context.beginPath()
    context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
    context.closePath()
    context.fill()
}
複製程式碼

這裡看著很熟悉，在做 android、iOS 開發自定義 View 的時候就遇到過類似的程式碼，在 draw() 函式裡畫圖，這裡我想到可以在移動端使用類似的方法畫出類似的背景。

這個時候呼叫初始化函式就可以看到靜態的一個個小圓點了

// 呼叫初始化函式
init();
function init() {
    for(var i = 0; i < roundCount; i++ ){
        round[i] = new roundItem(i,Math.random() * WIDTH,Math.random() * HEIGHT);
        round[i].draw();
    }
    animate()
}
複製程式碼

為了讓小圓點動起來，我們寫下面的函式。

// 移動圓點
roundItem.prototype.move = function () {
    // y方向移動速度與圓點半徑成正比
    this.y -= this.r / 20

    // x方向移動分兩個方向，移動速度與圓點半徑成正比
    if (this.index % 2 == 0) {
        this.x -= 0.08
    } else {
        this.x += this.r / 40
    }

    // 如果超出範圍就把它拉回來
    if (this.y <= 0) {
        this.y += HEIGHT
    }
    if (this.x <= 0) {
        this.x += WIDTH
    }
    if (this.x >= WIDTH) {
        this.x -= WIDTH
    }

    this.draw()
}
複製程式碼
// 定義動畫
function animate() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i in round) {
        round[i].move()
    }
    requestAnimationFrame(animate)
}
複製程式碼

這個時候就可以看到動態的一個個小圓點了。

是不是很炫酷呢，有空我再將它改造得更炫酷一點。

相關文章