最近閑來無聊，看了下ES6的語法，結(jié)合canvas實現(xiàn)了動畫特效——隨著鼠標的移動，會有小球跟隨且自動消失的動畫。
首先，html部分，目前就一個canvas標簽。
<canvas id="canvas"> 當(dāng)前瀏覽器不支持！ </canvas>
其次，css部分，沒有考慮美觀，大家喜歡的話，可以自己添加樣式
<style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style>最后，看下js實現(xiàn)部分
<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>稍作解釋下我的設(shè)計思路：
首先，獲取canvas對象，獲取上下文，設(shè)置一些基本的屬性。（canvas不做過多描述，具體的可以去w3自己研究）。然后，先定義一個Ball的類，里面有小球的圓心坐標位置，以及半徑和顏色。在定義一個畫小球的方法，具體的畫圓實現(xiàn)，不懂的可以去canvas文檔自己去看。
在定義一個會變的小球類并繼承Ball類。里面會有更新小球狀態(tài)的方法，用來改變小球的半徑以及顏色屬相。
最后，開啟一個定時器，當(dāng)鼠標移動時，把生成的小球存儲到數(shù)組中，然后遍歷循環(huán)讀取小球，并改變小球的樣式，達到最終的效果。
最后附上完整代碼。直接拷貝瀏覽器運行。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>會動的小球</title> <style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style></head><body> <canvas id="canvas"> 當(dāng)前瀏覽器不支持！ </canvas> <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></body></html>總結(jié)
以上所述是小編給大家介紹的ES6與canvas實現(xiàn)鼠標小球跟隨鼠標效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
