如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果

這篇文章主要介紹“如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果”，在日常操作中，相信很多人在如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、新區(qū)網(wǎng)站維護(hù)、網(wǎng)站推廣。

介紹

本效果采用Canvas畫布繪制，再利用class類繼承實(shí)現(xiàn)，實(shí)現(xiàn)的效果鼠標(biāo)在指定Canvas位置移動(dòng)，會(huì)在當(dāng)前鼠標(biāo)的位置產(chǎn)生隨機(jī)顏色的小球，之后小球會(huì)慢慢消失。

效果圖示

如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果

實(shí)現(xiàn)步驟

書寫HTML
創(chuàng)建canvas畫布環(huán)境
書寫小球類Ball
實(shí)現(xiàn)繼承球類(Ball)的MoveBall類
實(shí)例化小球

HTML結(jié)構(gòu)

<!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函數(shù)，引入就可以不用再手動(dòng)寫隨機(jī)函數(shù) -->
    <script src="./index.js"></script>
</body>
</html>

創(chuàng)建canvas畫布環(huán)境

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

實(shí)例解析

首先，找到 canvas 元素:

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

然后，創(chuàng)建 context 對(duì)象：

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

設(shè)置寬高背景色

書寫小球類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();
     }
 }

實(shí)例解析

可以看到里面有一個(gè)constructor()方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。
save() ---- 保存當(dāng)前環(huán)境的狀態(tài)
beginPath() ---- 起始一條路徑，或重置當(dāng)前路徑
arc() ---- 用于創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）-- 參數(shù)如下表

參數(shù)	描述
x	圓的中心的 x 坐標(biāo)。
y	圓的中心的 y 坐標(biāo)。
r	圓的半徑。
sAngle	起始角，以弧度計(jì)（弧的圓形的三點(diǎn)鐘位置是 0 度）。
eAngle	結(jié)束角，以弧度計(jì)。
counterclockwise	可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。

fillStyle() ---- 設(shè)置或返回用于填充繪畫的顏色、漸變或模式。
fill() ---- 填充當(dāng)前繪圖（路徑）
restore() ---- 返回之前保存過的路徑狀態(tài)和屬性。

實(shí)現(xiàn)繼承球類(Ball)的MoveBall類

// index.js

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

        // 量的變化  
        // 小球的隨機(jī)坐標(biāo)
        this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // 半徑變小的隨機(jī)數(shù)，因?yàn)樾∏蚴菑囊婚_始大然后慢慢的消失
        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表示小球消失 
        }
    }
}

實(shí)例解析

這里定義了一個(gè)MoveBall 類，該類通過extends關(guān)鍵字，繼承了Ball類的所有屬性和方法。
super關(guān)鍵字，它在這里表示父類的構(gòu)造函數(shù)，用來新建父類的this對(duì)象。子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇愖约旱膖his對(duì)象，必須先通過父類的構(gòu)造函數(shù)完成塑造，得到與父類同樣的實(shí)例屬性和方法，然后再對(duì)其進(jìn)行加工，加上子類自己的實(shí)例屬性和方法。如果不調(diào)用super方法，子類就得不到this對(duì)象。(詳情請(qǐng)點(diǎn)擊)
upDate方法目的就是改變小球的位置和半徑，根據(jù)鼠標(biāo)位置的不同進(jìn)行不同的變化

實(shí)例化小球

// index.js

// 5、實(shí)例化小球

// 存放產(chǎn)生的小球
let ballArr = [];

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

// 監(jiān)聽鼠標(biāo)的移動(dòng)
canvas.addEventListener('mousemove', function (e){
    // 隨機(jī)顏色 
    // 也可以固定顏色數(shù)組 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);
})

// 開啟定時(shí)器 
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);

實(shí)例解析

書寫了一個(gè)用于產(chǎn)生隨機(jī)顏色的Random函數(shù)
監(jiān)聽鼠標(biāo)的移動(dòng)創(chuàng)建移動(dòng)的小球，然后推入存儲(chǔ)小球的數(shù)組中，這樣數(shù)組里的小球就有render和upDate方法，最后依次調(diào)用Ball類的render方法進(jìn)行繪制，調(diào)用MoveBall的upDate方法。至此效果就出來啦！
clearRect清屏操作 ---- 在給定的矩形內(nèi)清除指定的像素(詳情點(diǎn)擊)。不清屏的效果看下圖

如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果

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

index.js完整代碼

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

// 設(shè)置畫布的大小樣式
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、會(huì)移動(dòng)小球的類
class MoveBall extends Ball { // 繼承
    constructor (x, y, color) {
        super(x, y, color);

        // 量的變化  
        // 小球的隨機(jī)坐標(biāo)
        this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // 半徑變小的隨機(jī)數(shù)
        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、實(shí)例化小球

// 存放產(chǎn)生的小球
let ballArr = [];

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

// 監(jiān)聽鼠標(biāo)的移動(dòng)
canvas.addEventListener('mousemove', function (e){
    // 隨機(jī)顏色 
    // 也可以固定顏色數(shù)組 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);
})

// 開啟定時(shí)器 
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);

到此，關(guān)于“如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

本文標(biāo)題：如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果
標(biāo)題網(wǎng)址：http://jinyejixie.com/article12/ggggdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、搜索引擎優(yōu)化、App開發(fā)、ChatGPT、商城網(wǎng)站、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果

介紹

實(shí)現(xiàn)步驟

創(chuàng)建canvas畫布環(huán)境

書寫小球類Ball

實(shí)現(xiàn)繼承球類(Ball)的MoveBall類

實(shí)例化小球

index.js完整代碼