首页-教程-Web前端

怎样利用Javascript简单实现星空连线的效果

 3928

本篇文章给大家带来了JavaScript中星空连线效果应该怎样呈现的相关知识，希望对大家有帮助。


怎样利用Javascript简单实现星空连线的效果


Javascript 星空连线效果的简单实现

之前有见过非常炫酷的粒子连线的效果，这篇文章主要是实现一个简单的星空连线的效果。

先贴一下大概的效果图。


怎样利用Javascript简单实现星空连线的效果


这个主要是用到了Html5中的canvas绘图，关于canvas的基本使用这里就不展开介绍了，大家可以自行去了解。

然后采用的是requestAnimationFrame来进行动画的绘制，而没有采用定时器。


一、实现的效果

星星自动生成，且星星的颜色，初始位置，移动方向都是随机的。

当星星之间的距离小于给定值之后，会在星星之间生成连线。

鼠标指针和星星之间的距离小于给定值之后，也会在星星和鼠标指针之间生成连线。


二、实现的方法

通过canvas绘图实现

定义星星类Star, 包括位置，半径，颜色，移速等属性与绘制和移动等方法。

绘制星星，实现随机移动的效果。

在绘制星星之后计算每个星星之间的距离，在符合要求的星星之间绘制连线。

计算鼠标指针和星星之间的距离，在符合要求的星星之间绘制连线。

绘制采用requestAnimationFrame

在主函数中执行4,5的函数继续进行绘制


三、具体的实现

Html + Css

基本的文档结构非常简单，创建一个canvas容器就可以了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>星空连线</title>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         body,
  14.         html {
  15.             width: 100%;
  16.             height: 100%;
  17.             overflow: hidden;
  18.         }
  19.         #starry {
  20.             position: absolute;
  21.             background-color: #000000;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <canvas id="starry"></canvas>
  27. </html>

定义星星类Star, 包括位置，半径，颜色，移速等属性与绘制和移动等方法。

  1. class Star {
  2.       constructor() {
  3.           this.x = randNum(3, canvas.width - 3);
  4.           this.y = randNum(3, canvas.height - 3);
  5.           this.r = randNum(1, 3);
  6.           this.color = randColor();
  7.           this.speedX = randNum(-2, 2) * 0.2;
  8.           this.speedY = randNum(-3, 3) * 0.2;
  9.       }
  10.       // 绘制每个星点
  11.       draw() {
  12.           //新建一条路径
  13.           ctx.beginPath();
  14.           //调整透明度
  15.           ctx.globalAlpha = 1;
  16.           // 填充颜色
  17.           ctx.fillStyle = this.color;
  18.           // 绘制圆弧
  19.           ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
  20.           // 填充
  21.           ctx.fill();
  22.       }
  23.       // 星星移动
  24.       move() {
  25.           this.x += this.speedX;
  26.           this.y += this.speedY;
  27.           //设置极限值
  28.           if (this.x <= 3 || this.x >= canvas.width - 3) this.speedX *= -1;
  29.           if (this.y <= 3 || this.y >= canvas.height - 3) this.speedY *= -1;
  30.       }
  31.   }
  32.   // 存储小球
  33.   let stars = [];
  34.   for (let i = 0; i < 150; i++) {
  35.       let star = new Star();
  36.       // 存入数组
  37.       stars.push(star);
  38.   }

绘制星星，实现随机移动的效果。

我们可以先实现星星的绘制，先暂时不管连线的效果。

  1. function drawLine() {
  2.     for (var i = 0; i < stars.length; i++) {
  3.         stars[i].draw();
  4.         stars[i].move();
  5.     }
  6. }

在绘制星星之后计算每个星星之间的距离，在符合要求的星星之间绘制连线。

其实只要在上一步的函数中添加距离判断和绘制连线的代码就可以了。

  1. function drawLine() {
  2.     for (var i = 0; i < stars.length; i++) {
  3.         stars[i].draw();
  4.         stars[i].move();
  5.         for (var j = 0; j < stars.length; j++) {
  6.             if (i != j) {
  7.                 if (Math.sqrt(Math.pow((stars[i].x - stars[j].x), 2) + Math.pow((stars[i].y - stars[j].y), 2)) < 80) {
  8.                     ctx.beginPath();
  9.                     ctx.moveTo(stars[i].x, stars[i].y);
  10.                     ctx.lineTo(stars[j].x, stars[j].y);
  11.                     ctx.strokeStyle = "white";
  12.                     ctx.globalAlpha = 0.2;
  13.                     ctx.stroke();
  14.                 }
  15.             }
  16.         }
  17.     }
  18. }

计算鼠标指针和星星之间的距离，在符合要求的星星之间绘制连线。

和绘制星星的方法差不多。

  1. function mouseLine() {
  2.       for (var i = 0; i < stars.length; i++) {
  3.           if (Math.sqrt(Math.pow((stars[i].x - mouseX), 2) + Math.pow((stars[i].y - mouseY), 2)) < 120) {
  4.               ctx.beginPath();
  5.               ctx.moveTo(stars[i].x, stars[i].y);
  6.               ctx.lineTo(mouseX, mouseY);
  7.               ctx.strokeStyle = "white";
  8.               ctx.globalAlpha = 0.8;
  9.               ctx.stroke();
  10.           }
  11.       }
  12.   }

主函数进行绘制

  1. function main() {
  2.       // 清除矩形区域
  3.       ctx.clearRect(0, 0, canvas.width, canvas.height);
  4.       //鼠标移动绘制连线
  5.       mouseLine();
  6.       // 小球之间自动连线
  7.       drawLine();
  8.       // 不断重新执行main(绘制和清除)
  9.       window.requestAnimationFrame(main);
  10.   }

一些辅助随机函数

  1. // 随机函数
  2. function randNum(m, n) {
  3.     return Math.floor(Math.random() * (n - m + 1) + m);
  4. }
  5. // 随机颜色
  6. function randColor() {
  7.     return 'rgb(' + randNum(0, 255) + ',' + randNum(0, 255) + ',' + randNum(0, 255) + ')';
  8. }


完整的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>星空连线</title>
  8.     <style type="text/css">
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         body,
  14.         html {
  15.             width: 100%;
  16.             height: 100%;
  17.             overflow: hidden;
  18.         }
  19.         #starry {
  20.             position: absolute;
  21.             background-color: #000000;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <canvas id="starry"></canvas>
  27.     <script type="text/javascript">
  28.         // 获取canvas容器
  29.         let canvas = document.getElementById('starry');
  30.         // 获取屏幕的宽高
  31.         canvas.width = document.documentElement.clientWidth;
  32.         canvas.height = document.documentElement.clientHeight;
  33.         // 设置绘制模式为2d
  34.         let ctx = canvas.getContext('2d');
  35.         class Star {
  36.             constructor() {
  37.                 this.x = randNum(3, canvas.width - 3);
  38.                 this.y = randNum(3, canvas.height - 3);
  39.                 this.r = randNum(1, 3);
  40.                 this.color = 'pink';
  41.                 this.color = randColor();
  42.                 this.speedX = randNum(-2, 2) * 0.2;
  43.                 this.speedY = randNum(-3, 3) * 0.2;
  44.             }
  45.             // 绘制每个星点
  46.             draw() {
  47.                 //新建一条路径
  48.                 ctx.beginPath();
  49.                 //调整透明度
  50.                 ctx.globalAlpha = 1;
  51.                 // 填充颜色
  52.                 ctx.fillStyle = this.color;
  53.                 // 绘制圆弧
  54.                 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
  55.                 // 填充
  56.                 ctx.fill();
  57.             }
  58.             // 小球移动
  59.             move() {
  60.                 this.x += this.speedX;
  61.                 this.y += this.speedY;
  62.                 //设置极限值
  63.                 if (this.x <= 3 || this.x >= canvas.width - 3) this.speedX *= -1;
  64.                 if (this.y <= 3 || this.y >= canvas.height - 3) this.speedY *= -1;
  65.             }
  66.         }
  67.         // 存储小球
  68.         let stars = [];
  69.         for (let i = 0; i < 150; i++) {
  70.             let star = new Star();
  71.             // 存入数组
  72.             stars.push(star);
  73.         }
  74.         let mouseX; let mouseY;
  75.         canvas.onmousemove = function (e) {
  76.             var e = event || e;
  77.             mouseX = e.offsetX;
  78.             mouseY = e.offsetY;
  79.             // console.log(mouseX+','+mouseY);
  80.         }
  81.         // 主要事件
  82.         main();
  83.         function mouseLine() {
  84.             for (var i = 0; i < stars.length; i++) {
  85.                 if (Math.sqrt(Math.pow((stars[i].x - mouseX), 2) + Math.pow((stars[i].y - mouseY), 2)) < 120) {
  86.                     ctx.beginPath();
  87.                     ctx.moveTo(stars[i].x, stars[i].y);
  88.                     ctx.lineTo(mouseX, mouseY);
  89.                     ctx.strokeStyle = "white";
  90.                     ctx.globalAlpha = 0.8;
  91.                     ctx.stroke();
  92.                 }
  93.             }
  94.         }
  95.         // 在一定范围内划线
  96.         function drawLine() {
  97.             for (var i = 0; i < stars.length; i++) {
  98.                 stars[i].draw();
  99.                 stars[i].move();
  100.                 // for (var j = 0; j < stars.length; j++) {
  101.                 //     if (i != j) {
  102.                 //         if (Math.sqrt(Math.pow((stars[i].x - stars[j].x), 2) + Math.pow((stars[i].y - stars[j].y), 2)) < 80) {
  103.                 //             ctx.beginPath();
  104.                 //             ctx.moveTo(stars[i].x, stars[i].y);
  105.                 //             ctx.lineTo(stars[j].x, stars[j].y);
  106.                 //             ctx.strokeStyle = "white";
  107.                 //             ctx.globalAlpha = 0.2;
  108.                 //             ctx.stroke();
  109.                 //         }
  110.                 //     }
  111.                 // }
  112.             }
  113.         }
  114.         function main() {
  115.             // 清除矩形区域
  116.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  117.             //鼠标移动绘制连线
  118.             mouseLine();
  119.             // 小球之间自动连线
  120.             drawLine();
  121.             // 不断重新执行main(绘制和清除)
  122.             window.requestAnimationFrame(main);
  123.         }
  124.         // 随机函数
  125.         function randNum(m, n) {
  126.             return Math.floor(Math.random() * (n - m + 1) + m);
  127.         }
  128.         // 随机颜色
  129.         function randColor() {
  130.             return 'rgb(' + randNum(0, 255) + ',' + randNum(0, 255) + ',' + randNum(0, 255) + ')';
  131.         }
  132.     </script>
  133. </body>
  134. </html>


结果如下：


怎样利用Javascript简单实现星空连线的效果

TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-10694.html
站长图库 - 怎样利用Javascript简单实现星空连线的效果
申明：本文转载于《掘金》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐