Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Javascript to simply achieve the star sky connection effect". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use Javascript to simply achieve the star sky connection effect".

Simple realization of Javascript Star-sky connection effect

I have seen the effect of very cool particle connection before, and the main purpose of this article is to achieve a simple starry sky connection effect.

Post a rough picture of the effect first.

This is mainly used in the canvas drawing in Html5, about the basic use of canvas here will not be introduced, you can understand.

Then requestAnimationFrame is used to draw the animation instead of a timer.

I. the effect of realization

Stars are generated automatically, and the color, initial position and direction of movement of the stars are all random.

When the distance between the stars is less than a given value, a line is generated between the stars.

When the distance between the mouse pointer and the star is less than the given value, a connection is also generated between the star and the mouse pointer.

Second, the method of realization

Realized by canvas drawing

Define the star class Star, including position, radius, color, speed and other attributes and drawing and moving methods.

Draw stars to achieve the effect of random movement.

Calculate the distance between each star after drawing the stars, and draw lines between the stars that meet the requirements.

Calculate the distance between the mouse pointer and the stars and draw a line between the stars that meet the requirements.

RequestAnimationFrame is used to draw.

The function that executes 4p5 in the main function continues to draw.

Third, the concrete realization

Html + Css

The basic document structure is simple enough to create a canvas container.

Star connection * {margin: 0; padding: 0;} body, html {width: 100%; height: 100%; overflow: hidden;} # starry {position: absolute; background-color: # 0000000;}

Define the star class Star, including position, radius, color, speed and other attributes and drawing and moving methods.

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 each star draw () {/ / create a new path ctx.beginPath (); / / adjust transparency ctx.globalAlpha = 1 / / fill color ctx.fillStyle = this.color; / / draw arc ctx.arc (this.x, this.y, this.r, 0, Math.PI * 2); / / fill ctx.fill () } / / Star moving move () {this.x + = this.speedX; this.y + = this.speedY; / / set limit if (this.x = canvas.width-3) this.speedX * =-1 If (this.y = canvas.height-3) this.speedY * =-1;}} / / Storage pellet 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() { // 清除矩形区域 ctx.clearRect(0, 0, canvas.width, canvas.height); //鼠标移动绘制连线 mouseLine(); // 小球之间自动连线 drawLine(); // 不断重新执行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) + ')'; } 完整的代码 星空连线 * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; overflow: hidden; } #starry { position: absolute; background-color: #000000; } // 获取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 = canvas.width - 3) this.speedX *= -1; if (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() { // 清除矩形区域 ctx.clearRect(0, 0, canvas.width, canvas.height); //鼠标移动绘制连线 mouseLine(); // 小球之间自动连线 drawLine(); // 不断重新执行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) + ')'; } 结果如下：

Thank you for your reading, the above is the content of "how to use Javascript to simply achieve the star connection effect". After the study of this article, I believe you have a deeper understanding of how to use Javascript to simply achieve the star connection effect, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.