最近閑來無聊，看了下ES6的語法，結合canvas實現了動畫特效——隨著鼠標的移動，會有小球跟隨且自動消失的動畫。

首先，html部分，目前就一個canvas標簽。

<canvas id="canvas">
當前瀏覽器不支持！
</canvas>

其次，css部分，沒有考慮美觀，大家喜歡的話，可以自己添加樣式

<style>
body{
margin: 90px;
}
#canvas{
box-shadow: 0 0 5px;
}
</style>

最后，看下js實現部分

<script>
const canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 1000;
canvas.style.backgroundColor = "#000";
const ctx = canvas.getContext("2d");
//小球類
class Ball{
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
//小球半徑默認40
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();
}
}
//移動小球
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color);
this.dX = Math.floor(Math.random()*5+1);
this.dY = Math.floor(Math.random()*5+1);
this.dR = Math.floor(Math.random()*5+1);
}
upData(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
let ballArry = [];
let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
canvas.addEventListener("mousemove",function(e){
ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
})
setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let i=0;i<ballArry.length;i++){
ballArry[i].render();
ballArry[i].upData();
}
},50);
</script>

稍作解釋下我的設計思路：

首先，獲取canvas對象，獲取上下文，設置一些基本的屬性。（canvas不做過多描述，具體的可以去w3自己研究）。然后，先定義一個Ball的類，里面有小球的圓心坐標位置，以及半徑和顏色。在定義一個畫小球的方法，具體的畫圓實現，不懂的可以去canvas文檔自己去看。

在定義一個會變的小球類并繼承Ball類。里面會有更新小球狀態的方法，用來改變小球的半徑以及顏色屬相。

最后，開啟一個定時器，當鼠標移動時，把生成的小球存儲到數組中，然后遍歷循環讀取小球，并改變小球的樣式，達到最終的效果。

最后附上完整代碼。直接拷貝瀏覽器運行。