如何使用ES6的class類繼承來實現絢麗小球效果

Posted on by

介紹

本效果采用Canvas畫佈繪制，再利用class類繼承實現，實現的效果鼠標在指定Canvas位置移動，會在當前鼠標的位置產生隨機顏色的小球，之後小球會慢慢消失。

效果圖示

實現步驟

  • 書寫HTML
  • 創建canvas畫佈環境
  • 書寫小球類Ball
  • 實現繼承球類(Ball)的MoveBall類
  • 實例化小球

HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>絢麗小球</title>
    <style>
        #canvas{
            margin-left: 100px
        }
    </style>
</head>
<body>
    <canvas id="canvas">你的瀏覽器不支持canvas</canvas>

    <!-- <script src="./underscore-min.js"></script>  -->
    <!-- underscore 中已有封裝好的  _.random函數，引入就可以不用再手動寫隨機函數 -->
    <script src="./index.js"></script>
</body>
</html>

創建canvas畫佈環境

 // index.js
 
 // 1、獲取當前的畫佈
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
  
 // 設置畫佈的大小樣式
 canvas.width = 1000;
 canvas.height = 600;
 canvas.style.backgroundColor = '#000'

實例解析

首先，找到 canvas 元素:

const canvas=document.getElementById("myCanvas");

然後，創建 context 對象：

const ctx = canvas.getContext('2d');

設置寬高背景色

書寫小球類Ball

// index.js

 // 2、小球類
 class Ball {
     constructor (x, y, color) {
         this.x = x;   // x軸
         this.y = y;   // y軸
         this.color = color;   // 小球的顏色
         this.r = 40;   // 小球的半徑
     }
 
     // 繪制小球
     render () {
         ctx.save();
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
         ctx.fillStyle = this.color;
         ctx.fill();
         ctx.restore();
     }
 }

實例解析

  • 可以看到裡面有一個constructor()方法，這就是構造方法，而this關鍵字則代表實例對象。
  • save() —- 保存當前環境的狀態
  • beginPath() —- 起始一條路徑，或重置當前路徑
  • arc() —- 用於創建弧/曲線（用於創建圓或部分圓）– 參數如下表
參數 描述
x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。
sAngle 起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。
eAngle 結束角，以弧度計。
counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
  • fillStyle() —- 設置或返回用於填充繪畫的顏色、漸變或模式。
  • fill() —- 填充當前繪圖（路徑）
  • restore() —- 返回之前保存過的路徑狀態和屬性。

實現繼承球類(Ball)的MoveBall類

// index.js

// 3、會移動小球的類
class MoveBall extends Ball { // 繼承
    constructor (x, y, color) {
        super(x, y, color);

        // 量的變化  
        // 小球的隨機坐標
        this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // 半徑變小的隨機數，因為小球是從一開始大然後慢慢的消失
        this.dR = Random(1, 3);
    }

    // 4、改變小球的位置和半徑
    upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // 判斷小球的半徑是否小於0
        if(this.r < 0) {
            this.r = 0  // 半徑為0表示小球消失 
        }
    }
}

實例解析

  • 這裡定義瞭一個MoveBall 類，該類通過extends關鍵字，繼承瞭Ball類的所有屬性和方法。
  • super關鍵字，它在這裡表示父類的構造函數，用來新建父類的this對象。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類自己的this對象，必須先通過父類的構造函數完成塑造，得到與父類同樣的實例屬性和方法，然後再對其進行加工，加上子類自己的實例屬性和方法。如果不調用super方法，子類就得不到this對象。(詳情請點擊)
  • upDate方法目的就是改變小球的位置和半徑，根據鼠標位置的不同進行不同的變化

實例化小球

// index.js

// 5、實例化小球

// 存放產生的小球
let ballArr = [];

// 定義隨機函數  如果引用瞭underscore-min.js 就不用寫隨機函數，可以直接用  _.random
let Random = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

// 監聽鼠標的移動
canvas.addEventListener('mousemove', function (e){
    // 隨機顏色 
    // 也可以固定顏色數組 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    let bgColor =  `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// 開啟定時器 
setInterval(function () {

    // 清屏
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 繪制小球
    for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

實例解析

  • 書寫瞭一個用於產生隨機顏色的Random函數
  • 監聽鼠標的移動創建移動的小球，然後推入存儲小球的數組中，這樣數組裡的小球就有render和upDate方法，最後依次調用Ball類的render方法進行繪制，調用MoveBall的upDate方法。至此效果就出來啦！
  • clearRect清屏操作 —- 在給定的矩形內清除指定的像素(詳情點擊)。不清屏的效果看下圖

我們可以看到不清屏小球半徑逐漸縮小到最後小球是不會消失的，咋們肯定要的效果不是這樣啦！清屏的效果是啥呢？就是文章開頭的那個效果啦！(寶,玩得開心喲❤)

index.js完整代碼

// 1、獲取當前的畫佈
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 設置畫佈的大小樣式
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'

// 2、小球類
class Ball {
    constructor (x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.r = 40;
    }

    // 繪制小球
    render () {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }

}

// 3、會移動小球的類
class MoveBall extends Ball { // 繼承
    constructor (x, y, color) {
        super(x, y, color);

        // 量的變化  
        // 小球的隨機坐標
        this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // 半徑變小的隨機數
        this.dR = Random(1, 3);
    }

    // 4、改變小球的位置和半徑
    upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // 判斷小球的半徑是否小於0
        if(this.r < 0) {
            this.r = 0
        }
    }

}

// 5、實例化小球

// 存放產生的小球
let ballArr = [];

// 定義隨機函數  如果引用瞭underscore-min.js 就不用寫隨機函數，可以直接用  _.random
let Random = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

// 監聽鼠標的移動
canvas.addEventListener('mousemove', function (e){
    // 隨機顏色 
    // 也可以固定顏色數組 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    let bgColor =  `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// 開啟定時器 
setInterval(function () {

    // 清屏
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 繪制小球
    for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

總結

希望這個小demo能幫大傢更熟悉ES6中class類的理解與使用,到此這篇關於如何使用ES6的class類繼承來實現絢麗小球效果的文章就介紹到這瞭,更多相關ES6 class類繼承實現小球內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：