站長資訊網本篇文章給大家?guī)砹薐avaScript中星空連線效果應該怎樣呈現的相關知識，希望對大家有幫助。
Javascript 星空連線效果的簡單實現
之前有見過非常炫酷的粒子連線的效果，這篇文章主要是實現一個簡單的星空連線的效果。
先貼一下大概的效果圖。
這個主要是用到了Html5中的canvas繪圖，關于canvas的基本使用這里就不展開介紹了，大家可以自行去了解。
然后采用的是requestAnimationFrame來進行動畫的繪制，而沒有采用定時器。
一、實現的效果
-
星星自動生成，且星星的顏色，初始位置，移動方向都是隨機的。
-
當星星之間的距離小于給定值之后，會在星星之間生成連線。
-
鼠標指針和星星之間的距離小于給定值之后，也會在星星和鼠標指針之間生成連線。
二、實現的方法
通過canvas繪圖實現
定義星星類Star, 包括位置，半徑，顏色，移速等屬性與繪制和移動等方法。
繪制星星，實現隨機移動的效果。
在繪制星星之后計算每個星星之間的距離，在符合要求的星星之間繪制連線。
計算鼠標指針和星星之間的距離，在符合要求的星星之間繪制連線。
繪制采用requestAnimationFrame
在主函數中執(zhí)行4,5的函數繼續(xù)進行繪制
三、具體的實現
Html + Css
基本的文檔結構非常簡單，創(chuàng)建一個canvas容器就可以了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>星空連線</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; overflow: hidden; } #starry { position: absolute; background-color: #000000; } </style> </head> <body> <canvas id="starry"></canvas> </html>
定義星星類Star, 包括位置，半徑，顏色，移速等屬性與繪制和移動等方法。
class Star { constructor() { this.x = randNum(3, canvas.width - 3); this.y = randNum(3, canvas.height - 3); this.r = randNum(1, 3); this.color = randColor(); this.speedX = randNum(-2, 2) * 0.2; this.speedY = randNum(-3, 3) * 0.2; } // 繪制每個星點 draw() { //新建一條路徑 ctx.beginPath(); //調整透明度 ctx.globalAlpha = 1; // 填充顏色 ctx.fillStyle = this.color; // 繪制圓弧 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); // 填充 ctx.fill(); } // 星星移動 move() { this.x += this.speedX; this.y += this.speedY; //設置極限值 if (this.x <= 3 || this.x >= canvas.width - 3) this.speedX *= -1; if (this.y <= 3 || this.y >= canvas.height - 3) this.speedY *= -1; } } // 存儲小球 let stars = []; for (let i = 0; i < 150; i++) { let star = new Star(); // 存入數組 stars.push(star); }
繪制星星，實現隨機移動的效果。
我們可以先實現星星的繪制，先暫時不管連線的效果。
function drawLine() { for (var i = 0; i < stars.length; i++) { stars[i].draw(); stars[i].move(); } }
在繪制星星之后計算每個星星之間的距離，在符合要求的星星之間繪制連線。
其實只要在上一步的函數中添加距離判斷和繪制連線的代碼就可以了。
function drawLine() { for (var i = 0; i < stars.length; i++) { stars[i].draw(); stars[i].move(); for (var j = 0; j < stars.length; j++) { if (i != j) { if (Math.sqrt(Math.pow((stars[i].x - stars[j].x), 2) + Math.pow((stars[i].y - stars[j].y), 2)) < 80) { ctx.beginPath(); ctx.moveTo(stars[i].x, stars[i].y); ctx.lineTo(stars[j].x, stars[j].y); ctx.strokeStyle = "white"; ctx.globalAlpha = 0.2; ctx.stroke(); } } } } }
計算鼠標指針和星星之間的距離，在符合要求的星星之間繪制連線。
和繪制星星的方法差不多。
function mouseLine() { for (var i = 0; i < stars.length; i++) { if (Math.sqrt(Math.pow((stars[i].x - mouseX), 2) + Math.pow((stars[i].y - mouseY), 2)) < 120) { ctx.beginPath(); ctx.moveTo(stars[i].x, stars[i].y); ctx.lineTo(mouseX, mouseY); ctx.strokeStyle = "white"; ctx.globalAlpha = 0.8; ctx.stroke(); } } }
主函數進行繪制
function main() { // 清除矩形區(qū)域 ctx.clearRect(0, 0, canvas.width, canvas.height); //鼠標移動繪制連線 mouseLine(); // 小球之間自動連線 drawLine(); // 不斷重新執(zhí)行main(繪制和清除) window.requestAnimationFrame(main); }
一些輔助隨機函數
// 隨機函數 function randNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } // 隨機顏色 function randColor() { return 'rgb(' + randNum(0, 255) + ',' + randNum(0, 255) + ',' + randNum(0, 255) + ')'; }
完整的代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>星空連線</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; overflow: hidden; } #starry { position: absolute; background-color: #000000; } </style> </head> <body> <canvas id="starry"></canvas> <script type="text/javascript"> // 獲取canvas容器 let canvas = document.getElementById('starry'); // 獲取屏幕的寬高 canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; // 設置繪制模式為2d let ctx = canvas.getContext('2d'); class Star { constructor() { this.x = randNum(3, canvas.width - 3); this.y = randNum(3, canvas.height - 3); this.r = randNum(1, 3); this.color = 'pink'; this.color = randColor(); this.speedX = randNum(-2, 2) * 0.2; this.speedY = randNum(-3, 3) * 0.2; } // 繪制每個星點 draw() { //新建一條路徑 ctx.beginPath(); //調整透明度 ctx.globalAlpha = 1; // 填充顏色 ctx.fillStyle = this.color; // 繪制圓弧 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); // 填充 ctx.fill(); } // 小球移動 move() { this.x += this.speedX; this.y += this.speedY; //設置極限值 if (this.x <= 3 || this.x >= canvas.width - 3) this.speedX *= -1; if (this.y <= 3 || this.y >= canvas.height - 3) this.speedY *= -1; } } // 存儲小球 let stars = []; for (let i = 0; i < 150; i++) { let star = new Star(); // 存入數組 stars.push(star); } let mouseX; let mouseY; canvas.onmousemove = function (e) { var e = event || e; mouseX = e.offsetX; mouseY = e.offsetY; // console.log(mouseX+','+mouseY); } // 主要事件 main(); function mouseLine() { for (var i = 0; i < stars.length; i++) { if (Math.sqrt(Math.pow((stars[i].x - mouseX), 2) + Math.pow((stars[i].y - mouseY), 2)) < 120) { ctx.beginPath(); ctx.moveTo(stars[i].x, stars[i].y); ctx.lineTo(mouseX, mouseY); ctx.strokeStyle = "white"; ctx.globalAlpha = 0.8; ctx.stroke(); } } } // 在一定范圍內劃線 function drawLine() { for (var i = 0; i < stars.length; i++) { stars[i].draw(); stars[i].move(); // for (var j = 0; j < stars.length; j++) { // if (i != j) { // if (Math.sqrt(Math.pow((stars[i].x - stars[j].x), 2) + Math.pow((stars[i].y - stars[j].y), 2)) < 80) { // ctx.beginPath(); // ctx.moveTo(stars[i].x, stars[i].y); // ctx.lineTo(stars[j].x, stars[j].y); // ctx.strokeStyle = "white"; // ctx.globalAlpha = 0.2; // ctx.stroke(); // } // } // } } } function main() { // 清除矩形區(qū)域 ctx.clearRect(0, 0, canvas.width, canvas.height); //鼠標移動繪制連線 mouseLine(); // 小球之間自動連線 drawLine(); // 不斷重新執(zhí)行main(繪制和清除) window.requestAnimationFrame(main); } // 隨機函數 function randNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } // 隨機顏色 function randColor() { return 'rgb(' + randNum(0, 255) + ',' + randNum(0, 255) + ',' + randNum(0, 255) + ')'; } </script> </body> </html>
結果如下：
【
