最近閑來無聊，看了下ES6的語法，結合canvas實現了動畫特效——隨著滑鼠的移動，會有小球跟隨且自動消失的動畫。 首先，html部分，目前就一個canvas標簽。 其次，css部分，沒有考慮美觀，大家喜歡的話，可以自己添加樣式 最後，看下js實現部分 稍作解釋下我的設計思路： 首先，獲取canva ...
最近閑來無聊，看了下ES6的語法，結合canvas實現了動畫特效——隨著滑鼠的移動，會有小球跟隨且自動消失的動畫。
首先，html部分，目前就一個canvas標簽。
1 <canvas id="canvas"> 2 當前瀏覽器不支持！ 3 </canvas>
其次，css部分，沒有考慮美觀，大家喜歡的話，可以自己添加樣式
1 <style> 2 body{ 3 margin: 90px; 4 } 5 #canvas{ 6 box-shadow: 0 0 5px; 7 } 8 </style>
最後，看下js實現部分
1 <script> 2 const canvas = document.getElementById("canvas"); 3 canvas.height = 600; 4 canvas.width = 1000; 5 canvas.style.backgroundColor = "#000"; 6 const ctx = canvas.getContext("2d"); 7 8 //小球類 9 class Ball{ 10 constructor(x, y, color){ 11 this.x = x; 12 this.y = y; 13 this.color = color; 14 //小球半徑預設40 15 this.r = 40; 16 } 17 //繪製小球 18 render(){ 19 ctx.save(); 20 ctx.beginPath(); 21 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 22 ctx.fillStyle = this.color; 23 ctx.fill(); 24 ctx.restore(); 25 } 26 } 27 //移動小球 28 class MoveBall extends Ball{ 29 constructor(x, y, color){ 30 super(x, y, color); 31 32 this.dX = Math.floor(Math.random()*5+1); 33 this.dY = Math.floor(Math.random()*5+1); 34 this.dR = Math.floor(Math.random()*5+1); 35 } 36 37 upData(){ 38 this.x += this.dX; 39 this.y += this.dY; 40 this.r -= this.dR; 41 if(this.r < 0){ 42 this.r = 0; 43 } 44 } 45 } 46 47 let ballArry = []; 48 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; 49 50 canvas.addEventListener("mousemove",function(e){ 51 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); 52 }) 53 54 setInterval(function(){ 55 ctx.clearRect(0, 0, canvas.width, canvas.height); 56 57 for(let i=0;i<ballArry.length;i++){ 58 ballArry[i].render(); 59 ballArry[i].upData(); 60 } 61 },50); 62 </script>
稍作解釋下我的設計思路：
首先，獲取canvas對象，獲取上下文，設置一些基本的屬性。（canvas不做過多描述，具體的可以去w3自己研究）。然後，先定義一個Ball的類，裡面有小球的圓心坐標位置，以及半徑和顏色。在定義一個畫小球的方法，具體的畫圓實現，不懂的可以去canvas文檔自己去看。
在定義一個會變的小球類並繼承Ball類。裡面會有更新小球狀態的方法，用來改變小球的半徑以及顏色屬相。
最後，開啟一個定時器，當滑鼠移動時，把生成的小球存儲到數組中，然後遍歷迴圈讀取小球，並改變小球的樣式，達到最終的效果。
最後附上完整代碼。直接拷貝瀏覽器運行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>會動的小球</title> 6 <style> 7 body{ 8 margin: 90px; 9 } 10 #canvas{ 11 box-shadow: 0 0 5px; 12 } 13 </style> 14 </head> 15 <body> 16 <canvas id="canvas"> 17 當前瀏覽器不支持！ 18 </canvas> 19 <script> 20 const canvas = document.getElementById("canvas"); 21 canvas.height = 600; 22 canvas.width = 1000; 23 canvas.style.backgroundColor = "#000"; 24 const ctx = canvas.getContext("2d"); 25 26 //小球類 27 class Ball{ 28 constructor(x, y, color){ 29 this.x = x; 30 this.y = y; 31 this.color = color; 32 //小球半徑預設40 33 this.r = 40; 34 } 35 //繪製小球 36 render(){ 37 ctx.save(); 38 ctx.beginPath(); 39 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 40 ctx.fillStyle = this.color; 41 ctx.fill(); 42 ctx.restore(); 43 } 44 } 45 //移動小球 46 class MoveBall extends Ball{ 47 constructor(x, y, color){ 48 super(x, y, color); 49 50 this.dX = Math.floor(Math.random()*5+1); 51 this.dY = Math.floor(Math.random()*5+1); 52 this.dR = Math.floor(Math.random()*5+1); 53 } 54 55 upData(){ 56 this.x += this.dX; 57 this.y += this.dY; 58 this.r -= this.dR; 59 if(this.r < 0){ 60 this.r = 0; 61 } 62 } 63 } 64 65 let ballArry = []; 66 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; 67 68 canvas.addEventListener("mousemove",function(e){ 69 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); 70 }) 71 72 setInterval(function(){ 73 ctx.clearRect(0, 0, canvas.width, canvas.height); 74 75 for(let i=0;i<ballArry.length;i++){ 76 ballArry[i].render(); 77 ballArry[i].upData(); 78 } 79 },50); 80 </script> 81 </body> 82 </html>
