Canvas繪製粒子連線特效背景
阿新 • • 發佈：2020-12-11
var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); resize(); window.onresize = resize;
//定義畫布大小的函式 function resize() { canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; canvas.height= window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; }
//定時設定 瀏覽器下次重繪之前繼續更新下一幀動畫 var RAF = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); // 滑鼠活動時，獲取滑鼠座標 var warea = {x: null, y: null, max: 20000}; window.onmousemove = function(e) { e = e || window.event; warea.x = e.clientX; warea.y = e.clientY; }; window.onmouseout= function(e) { warea.x = null; warea.y = null; }; // 新增粒子 // x，y為粒子座標，xa, ya為粒子xy軸加速度，max為連線的最大距離 var dots = []; for (var i = 0; i < 300; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var xa = Math.random() * 2 - 1; var ya = Math.random() * 2 - 1; dots.push({ x: x, y: y, xa: xa, ya: ya, max: 6000 }) } // 延遲100秒開始執行動畫，如果立即執行有時位置計算會出錯 setTimeout(function() { animate(); }, 100); // 每一幀迴圈的邏輯 function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 將滑鼠座標新增進去，產生一個用於比對距離的點陣列 var ndots = [warea].concat(dots); dots.forEach(function(dot) { // 粒子位移 dot.x += dot.xa; dot.y += dot.ya; // 遇到邊界將加速度反向 dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1; dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1; // 繪製點 ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1); // 迴圈比對粒子間的距離 for (var i = 0; i < ndots.length; i++) { var d2 = ndots[i]; if (dot === d2 || d2.x === null || d2.y === null) continue; var xc = dot.x - d2.x; var yc = dot.y - d2.y; // 兩個粒子之間的距離 var dis = xc * xc + yc * yc; // 距離比 var ratio; // 如果兩個粒子之間的距離小於粒子物件的max值，則在兩個粒子間畫線 if (dis < d2.max) { // 如果是滑鼠，則讓粒子向滑鼠的位置移動 if (d2 === warea && dis > (d2.max / 2)) { dot.x -= xc * 0.03; dot.y -= yc * 0.03; } // 計算距離比 ratio = (d2.max - dis) / d2.max; // 畫線 ctx.beginPath(); ctx.lineWidth = ratio / 2; //線條顏色 ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')'; ctx.moveTo(dot.x, dot.y); ctx.lineTo(d2.x, d2.y); ctx.stroke(); } } // 將已經計算過的粒子從陣列中刪除 ndots.splice(ndots.indexOf(dot), 1); }); RAF(animate); }
頁面程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title></title> </head> <body> <!-- 頁面背景 --> <canvas id="cas"></canvas> </body> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> <script src="./js/canvas.js"></script> </html>