最近在咕泡學院的VIP學習中看到利用canvas實現各種效果，我也仿照做一個。由於學習了vue和es6我決定用vue和es6的新特性來實現。 接下來讓我們一步一步來建立一個。 第一步，建立html加入canvas

<template>
<div class="canvasDiv">
<canvas id="myCanvas">當前瀏覽器不支援canvas</canvas>
</div>
</template>

如果瀏覽器不支援，請切換到最新的瀏覽器。

第二步，在mounted中對canvas進行初始化 由於要先載入canvas才能進行初始化，所以要在mounted中初始化。否則會報錯。

let myCanvasEle = document.getElementById("myCanvas");
this.ctx = myCanvasEle.getContext("2d");
myCanvasEle.width = this.canvasWidth;
myCanvasEle.height = this.canvasHeight;
myCanvasEle.style.background = "black";

第三步，定義ball.js類

/**
* 小球類
*/
class Ball {
constructor(ctx, x, y, color) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
/**
* 繪製小球
*/
draw() {
this.ctx.save();
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.restore();
}
}
/**
* 移動球類繼承球
*/
class MoveBall extends Ball {
constructor(ctx, x, y, color) {
super(ctx, x, y, color);
this.dx = random(-5, 5);
this.dy = random(-5, 5);
this.dr = random(3, 5);
}
//改變小球的x,y,r使小球動起來
update() {
this.x += this.dx;
this.y += this.dy;
this.r -= this.dr;
if(this.r < 0) {
this.r = 0;
}
}
}//歡迎加入全棧開發交流群一起學習交流：864305860
/**
* 根據start和end生成隨機數
*/
const random = (start, end) => Math.floor(Math.random() * (end - start) + start);
export default {
getBall(ctx, x, y, color) {
let moveBall = new MoveBall(ctx, x, y, color);
return moveBall;
}
}
 

在ball.js中定義了兩個類，一個小球類，一個是移動的小球，其中移動的小球繼承了小球,暴露出一個getBall方法。 第四步，在main中呼叫

//增加移動事件
myCanvasEle.addEventListener("mousemove", (e) => {
this.ballArray.push(ball.getBall(this.ctx, e.offsetX, e.offsetY, this.colorArray[Math.floor(Math.random() * (this.colorArray.length))]));
});

//定時器
setInterval(() => {
this.clear();
this.draw();
}, 50);

//清屏
clear() {    
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
}
//歡迎加入全棧開發交流群一起學習交流：864305860

//繪製
draw() {    
for(let i = 0; i < this.ballArray.length; i++) {
this.ballArray[i].draw();
this.ballArray[i].update();
}
}
 

#獲取原始碼 本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。