关灯
收起左侧

[前端源码] JavaScript实现背景随机线条效果

0
回复
86
查看
[复制链接]

 成长值: 20183

个人资料

职务: 董事会

铜板: 1525 个

金币: 1001 个

荣耀勋章

超级版主开国元勋夜猫子勋章春节勋章论坛一周年最佳新人活跃会员志愿者推广达人宣传达人灌水之王突出贡献版主荣誉管理论坛元勋

发表于 2021-7-1 16:13:55 | 显示全部楼层 |阅读模式

 
下载.gif
  1. <canvas id="cas"></canvas>
  2. <script>
  3.         var canvas = document.getElementById("cas");
  4.         var ctx = canvas.getContext("2d");
  5.         resize();
  6.         window.onresize = resize;
  7.         function resize() {
  8.             canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  9.             canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  10.         }
  11.         var RAF = (function () {
  12.             return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
  13.                 window.setTimeout(callback, 1000 / 60);
  14.             };
  15.         })();
  16.         // 鼠标活动时,获取鼠标坐标
  17.         var warea = { x: null, y: null, max: 20000 };
  18.         window.onmousemove = function (e) {
  19.             e = e || window.event;
  20.             warea.x = e.clientX;
  21.             warea.y = e.clientY;
  22.         };
  23.         window.onmouseout = function (e) {
  24.             warea.x = null;
  25.             warea.y = null;
  26.         };
  27.         // 添加粒子
  28.         // x,y为粒子坐标,xa, ya为粒子xy轴加速度,max为连线的最大距离
  29.         var dots = [];
  30.         for (var i = 0; i < 300; i++) {
  31.             var x = Math.random() * canvas.width;
  32.             var y = Math.random() * canvas.height;
  33.             var xa = Math.random() * 2 - 1;
  34.             var ya = Math.random() * 2 - 1;
  35.             dots.push({
  36.                 x: x,
  37.                 y: y,
  38.                 xa: xa,
  39.                 ya: ya,
  40.                 max: 6000
  41.             })
  42.         }
  43.         // 延迟100秒开始执行动画,如果立即执行有时位置计算会出错
  44.         setTimeout(function () {
  45.             animate();
  46.         }, 100);
  47.         // 每一帧循环的逻辑
  48.         function animate() {
  49.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  50.             // 将鼠标坐标添加进去,产生一个用于比对距离的点数组
  51.             var ndots = [warea].concat(dots);
  52.             dots.forEach(function (dot) {
  53.                 // 粒子位移
  54.                 dot.x += dot.xa;
  55.                 dot.y += dot.ya;
  56.                 // 遇到边界将加速度反向
  57.                 dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
  58.                 dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
  59.                 // 绘制点
  60.                 ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
  61.                 // 循环比对粒子间的距离
  62.                 for (var i = 0; i < ndots.length; i++) {
  63.                     var d2 = ndots[i];
  64.                     if (dot === d2 || d2.x === null || d2.y === null) continue;
  65.                     var xc = dot.x - d2.x;
  66.                     var yc = dot.y - d2.y;
  67.                     // 两个粒子之间的距离
  68.                     var dis = xc * xc + yc * yc;
  69.                     // 距离比
  70.                     var ratio;
  71.                     // 如果两个粒子之间的距离小于粒子对象的max值,则在两个粒子间画线
  72.                     if (dis < d2.max) {
  73.                         // 如果是鼠标,则让粒子向鼠标的位置移动
  74.                         if (d2 === warea && dis > (d2.max / 2)) {
  75.                             dot.x -= xc * 0.03;
  76.                             dot.y -= yc * 0.03;
  77.                         }
  78.                         // 计算距离比
  79.                         ratio = (d2.max - dis) / d2.max;
  80.                         // 画线
  81.                         ctx.beginPath();
  82.                         ctx.lineWidth = ratio / 2;
  83.                         ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
  84.                         ctx.moveTo(dot.x, dot.y);
  85.                         ctx.lineTo(d2.x, d2.y);
  86.                         ctx.stroke();
  87.                     }
  88.                 }
  89.                 // 将已经计算过的粒子从数组中删除
  90.                 ndots.splice(ndots.indexOf(dot), 1);
  91.             });
  92.             RAF(animate);
  93.         }
  94.     </script>
复制代码


回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

官方微信

APP下载

24小时客服QQ

3300-1700-74
Copyright ©  2018-2020   天马论坛 (吉ICP备19000744号-1