溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果”，在日常操作中，相信很多人在如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
本效果采用Canvas畫布繪制，再利用class類繼承實現(xiàn)，實現(xiàn)的效果鼠標(biāo)在指定Canvas位置移動，會在當(dāng)前鼠標(biāo)的位置產(chǎn)生隨機(jī)顏色的小球，之后小球會慢慢消失。
效果圖示
書寫HTML
創(chuàng)建canvas畫布環(huán)境
書寫小球類Ball
實現(xiàn)繼承球類(Ball)的MoveBall類
實例化小球
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ù)，引入就可以不用再手動寫隨機(jī)函數(shù) -->
<script src="./index.js"></script>
</body>
</html> // 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'實例解析
首先，找到 canvas 元素:
const canvas=document.getElementById("myCanvas");然后，創(chuàng)建 context 對象：
const ctx = canvas.getContext('2d');設(shè)置寬高背景色
// 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()方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實例對象。
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 | 起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。 |
| eAngle | 結(jié)束角，以弧度計。 |
| counterclockwise | 可選。規(guī)定應(yīng)該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 |
fillStyle() ---- 設(shè)置或返回用于填充繪畫的顏色、漸變或模式。
fill() ---- 填充當(dāng)前繪圖（路徑）
restore() ---- 返回之前保存過的路徑狀態(tài)和屬性。
// index.js
// 3、會移動小球的類
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 // 半徑為0表示小球消失
}
}
}實例解析
這里定義了一個MoveBall 類，該類通過extends關(guān)鍵字，繼承了Ball類的所有屬性和方法。
super關(guān)鍵字，它在這里表示父類的構(gòu)造函數(shù)，用來新建父類的this對象。子類必須在constructor方法中調(diào)用super方法，否則新建實例時會報錯。這是因為子類自己的this對象，必須先通過父類的構(gòu)造函數(shù)完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進(jìn)行加工，加上子類自己的實例屬性和方法。如果不調(diào)用super方法，子類就得不到this對象。(詳情請點擊)
upDate方法目的就是改變小球的位置和半徑，根據(jù)鼠標(biāo)位置的不同進(jìn)行不同的變化
// index.js
// 5、實例化小球
// 存放產(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)的移動
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);
})
// 開啟定時器
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);實例解析
書寫了一個用于產(chǎn)生隨機(jī)顏色的Random函數(shù)
監(jiān)聽鼠標(biāo)的移動創(chuàng)建移動的小球，然后推入存儲小球的數(shù)組中，這樣數(shù)組里的小球就有render和upDate方法，最后依次調(diào)用Ball類的render方法進(jìn)行繪制，調(diào)用MoveBall的upDate方法。至此效果就出來啦！
clearRect清屏操作 ---- 在給定的矩形內(nèi)清除指定的像素(詳情點擊)。不清屏的效果看下圖
我們可以看到不清屏小球半徑逐漸縮小到最后小球是不會消失的，咋們肯定要的效果不是這樣啦！清屏的效果是啥呢？就是文章開頭的那個效果啦！(寶,玩得開心喲?)
// 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、會移動小球的類
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、實例化小球
// 存放產(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)的移動
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);
})
// 開啟定時器
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類繼承來實現(xiàn)絢麗小球效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼