[玩耍]JavaScript几何星空连线(鼠标跟随)完善

最新推荐文章于 2023-07-31 19:20:22 发布

原创

最新推荐文章于 2023-07-31 19:20:22 发布 · 2.5k 阅读

12 ·

CC 4.0 BY-SA版权

完善了一下星空连线背景效果. 添加了粒子的鼠标跟随的效果. 参考的类似功能的JS源码都处理压缩过, 没有换行缩进, 变量名都是a, b, c… 看着真累啊.

把两次遍历改成了一次遍历, 把鼠标所在的点 p0 与 points 数组 concat 到一起处理了.

舍弃了原来按时间间隔计算移动距离的方法, 直接每一帧移动一定距离. 优化了代码, 提高了些性能.

鼠标跟随的原理是, 当粒子靠近鼠标指针到一定距离区间内, 就每帧向鼠标靠近对应距离. 所以当粒子一边远离一边被吸引时在边界会有些许鬼畜.

点此访问演示DEMO

截图:

在这里插入图片描述

源码:

//==========================================
// File:    background.js
// Title:   星空连线(鼠标跟随)
// Auther:  XieNaoban
// Version: v1.1
// Note:    直接扔在<body>里
//==========================================

// 可调参数
var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景色
var POINT_NUM = 99;                         // 屏幕上点的数目
var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

// 创建背景画布
var cvs = document.createElement("canvas");
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
document.body.appendChild(cvs);

var ctx = cvs.getContext("2d");

var startTime = new Date().getTime();

//随机数函数
function randomInt(min, max) {
   
   
    return Math.floor((max - min + 1) * Math.random() + min);
}

function randomFloat(min, max) {
   
   
    return (max - min) * Math.random() + min;
}

//构造点类