javascript实现几何粒子星空连线背景效果

javascript实现几何粒子星空连线背景效果

<html><head><meta charset="UTF-8"><title>几何星空连线背景</title><script src="./ParticleBackground.js"></script>
</head><body><canvas id="canvas"></canvas><script>const particleBackgroundInstance = new ParticleBackground();particleBackgroundInstance.initPoints();particleBackgroundInstance.drawFrame();/*// 可调参数// var BACKGROUND_COLOR = "rgba(255,255,255,0.6)";   // 背景颜色var BACKGROUND_COLOR = "rgba(0, 43, 54,1)";   // 背景颜色var POINT_NUM = 150;                        // 星星数目var POINT_COLOR = "rgba(255,255,255,1)";  // 点的颜色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;}//构造点类function Point() {this.x = randomFloat(0, cvs.width);this.y = randomFloat(0, cvs.height);var speed = randomFloat(0.3, 1.4);var angle = randomFloat(0, 2 * Math.PI);this.dx = Math.sin(angle) * speed;this.dy = Math.cos(angle) * speed;this.r = 1.2;this.color = POINT_COLOR;}Point.prototype.move = function () {this.x += this.dx;if (this.x < 0) {this.x = 0;this.dx = -this.dx;} else if (this.x > cvs.width) {this.x = cvs.width;this.dx = -this.dx;}this.y += this.dy;if (this.y < 0) {this.y = 0;this.dy = -this.dy;} else if (this.y > cvs.height) {this.y = cvs.height;this.dy = -this.dy;}}Point.prototype.draw = function () {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);ctx.closePath();ctx.fill();}var points = [];function initPoints(num) {for (var i = 0; i < num; ++i) {points.push(new Point());}}var p0 = new Point(); //鼠标p0.dx = p0.dy = 0;var degree = 2.5;document.onmousemove = function (ev) {p0.x = ev.clientX;p0.y = ev.clientY;}document.onmousedown = function (ev) {degree = 5.0;p0.x = ev.clientX;p0.y = ev.clientY;}document.onmouseup = function (ev) {degree = 2.5;p0.x = ev.clientX;p0.y = ev.clientY;}window.onmouseout = function () {p0.x = null;p0.y = null;}function drawLine(p1, p2, deg) {var dx = p1.x - p2.x;var dy = p1.y - p2.y;var dis2 = dx * dx + dy * dy;if (dis2 < 2 * LINE_LENGTH) {if (dis2 > LINE_LENGTH) {if (p1 === p0) {p2.x += dx * 0.03;p2.y += dy * 0.03;} else return;}var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;ctx.strokeStyle = "rgba(255,255,255," + t + ")";ctx.beginPath();ctx.lineWidth = 1.5;ctx.moveTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.closePath();ctx.stroke();}return;}//绘制每一帧function drawFrame() {cvs.width = window.innerWidth;cvs.height = window.innerHeight;ctx.fillStyle = BACKGROUND_COLOR;ctx.fillRect(0, 0, cvs.width, cvs.height);var arr = (p0.x == null ? points : [p0].concat(points));for (var i = 0; i < arr.length; ++i) {for (var j = i + 1; j < arr.length; ++j) {drawLine(arr[i], arr[j], 1.0);}arr[i].draw();arr[i].move();}window.requestAnimationFrame(drawFrame);}initPoints(POINT_NUM);drawFrame();*/</script>
</body></html>
  • 封装的js方法库ParticleBackground.js
class Point {constructor(canvas, options) {this.canvas = canvas;this.ctx = canvas.getContext("2d");options = options || {};this.options = {pointColor: options.pointColor || "rgba(255,255,255,1)",};this.x = this.randomFloat(0, this.canvas.width);this.y = this.randomFloat(0, this.canvas.height);var speed = this.randomFloat(0.3, 1.4);var angle = this.randomFloat(0, 2 * Math.PI);this.dx = Math.sin(angle) * speed;this.dy = Math.cos(angle) * speed;this.r = 1.2;this.color = this.options.pointColor;}move() {this.x += this.dx;if (this.x < 0) {this.x = 0;this.dx = -this.dx;} else if (this.x > this.canvas.width) {this.x = this.canvas.width;this.dx = -this.dx;}this.y += this.dy;if (this.y < 0) {this.y = 0;this.dy = -this.dy;} else if (this.y > this.canvas.height) {this.y = this.canvas.height;this.dy = -this.dy;}}draw() {this.ctx.fillStyle = this.color;this.ctx.beginPath();this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);this.ctx.closePath();this.ctx.fill();}randomInt(min, max) {return Math.floor((max - min + 1) * Math.random() + min);}randomFloat(min, max) {return (max - min) * Math.random() + min;}
}class ParticleBackground {constructor(options) {options = options || {};this.canvas = document.createElement("canvas");this.ctx = this.canvas.getContext("2d");this.points = [];this.degree = 2.5;this.startTime = new Date().getTime();this.options = {backgroundColor: options.backgroundColor || "rgba(0, 43, 54,1)",pointNum: options.pointNum || 150,pointColor: options.pointColor || "rgba(255,255,255,1)",lineLength: options.lineLength || 10000,};this.p0 = new Point(this.canvas, this.options);this.p0.dx = this.p0.dy = 0;this.canvas.width = window.innerWidth;this.canvas.height = window.innerHeight;this.canvas.style.cssText = `position: fixed;top: 0px;left: 0px;z-index: -1;opacity: 1.0;`;document.body.appendChild(this.canvas, this.options);}initPoints(num) {if (!num) num = this.options.pointNum;for (var i = 0; i < num; ++i) {this.points.push(new Point(this.canvas));}this.initListner();}drawLine(p1, p2, deg) {var dx = p1.x - p2.x;var dy = p1.y - p2.y;var dis2 = dx * dx + dy * dy;if (dis2 < 2 * this.options.lineLength) {if (dis2 > this.options.lineLength) {if (p1 === this.p0) {p2.x += dx * 0.03;p2.y += dy * 0.03;} else return;}var t = (1.05 - dis2 / this.options.lineLength) * 0.2 * deg;this.ctx.strokeStyle = "rgba(255,255,255," + t + ")";this.ctx.beginPath();this.ctx.lineWidth = 1.5;this.ctx.moveTo(p1.x, p1.y);this.ctx.lineTo(p2.x, p2.y);this.ctx.closePath();this.ctx.stroke();}return;}drawFrame() {this.canvas.width = window.innerWidth;this.canvas.height = window.innerHeight;this.ctx.fillStyle = this.options.backgroundColor;this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);var arr = this.p0.x == null ? this.points : [this.p0].concat(this.points);for (var i = 0; i < arr.length; ++i) {for (var j = i + 1; j < arr.length; ++j) {this.drawLine(arr[i], arr[j], 1.0);}arr[i].draw();arr[i].move();}window.requestAnimationFrame(this.drawFrame.bind(this));}initListner() {const _this = this;document.onmousemove = function (ev) {_this.p0.x = ev.clientX;_this.p0.y = ev.clientY;};document.onmousedown = function (ev) {_this.degree = 5.0;_this.p0.x = ev.clientX;_this.p0.y = ev.clientY;};document.onmouseup = function (ev) {_this.degree = 2.5;_this.p0.x = ev.clientX;_this.p0.y = ev.clientY;};window.onmouseout = function () {_this.p0.x = null;_this.p0.y = null;};}
}

实现效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/16251.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux进程调度

Linux进程调度

初探Linux进程调度 已知&#xff1a;父进程创建子进程后&#xff0c;父子进程同时运行。 问题&#xff1a;如果计算机只有一个处理器&#xff0c;父子进程以什么方式同时执行&#xff1f; 基本概念 运行&#xff1a;一个可执行程序从文件&#xff0c;变成进程的过程。 执行…
阅读更多...
MySQL碎片清理

MySQL碎片清理

为什么产生&#xff1f; 经过大量增删改的表&#xff0c;都可能存在碎片 MySQL数据结构是B树&#xff0c; 删除某一记录&#xff0c;只会标记为删除&#xff0c;后续插入一条该区间的记录&#xff0c;就会复用这个位置。 删除整个数据页的记录&#xff0c;则整个页标记为“可…
阅读更多...
微软对Visual Studio 17.7 Preview 4进行版本更新，新插件管理器亮相

微软对Visual Studio 17.7 Preview 4进行版本更新，新插件管理器亮相

近期微软发布了Visual Studio 17.7 Preview 4版本&#xff0c;而在这个版本当中&#xff0c;全新设计的扩展插件管理器将亮相&#xff0c;并且可以让用户可更简单地安装和管理扩展插件。 据了解&#xff0c;目前用户可以从 Visual Studio Marketplace 下载各式各样的 VS 扩展插…
阅读更多...
常用的CSS渐变样式

常用的CSS渐变样式

边框渐变 方案1&#xff1a; 边框渐变( 支持圆角) width: 726px;height: 144px;border-radius: 24px;border: 5px solid transparent;background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #f…
阅读更多...
HTML+CSS前端 简易用户登录界面

HTML+CSS前端 简易用户登录界面

Day1 刚学了一些html和css的简单语法&#xff0c;尝试写一个非常简易的静态用户登录界面。 login_simple.html <!DOCTYPE html> <html lang"en"><head><meta name"viewport" content"widthdevice-width,initial-scale1.0"…
阅读更多...
opencv中轮廓相关属性

opencv中轮廓相关属性

一、介绍 findContours() &#xff1a;The function retrieves contours from the binary image。 二、代码 void main() {Mat src imread("match00.bmp", IMREAD_GRAYSCALE);Mat mask;threshold(src, mask, 128, 255, cv::THRESH_BINARY_INV);Mat element cv::g…
阅读更多...
6门新兴语言，小众亦强大

6门新兴语言，小众亦强大

编码语言在塑造我们创建软件的方式方面起着至关重要的作用。多年来&#xff0c;我们观察到Python&#xff0c;Java和C等成熟语言的流行。然而&#xff0c;如今一波新的编码语言浪潮已经出现&#xff0c;提出了创造性的解决方案&#xff0c;并推动了软件工程领域所能完成的极限。…
阅读更多...
Cesium 实战 - Blender调整模型组件原点，实现直升机尾翼旋转

Cesium 实战 - Blender调整模型组件原点，实现直升机尾翼旋转

Cesium 实战 - Blender调整模型组件原点&#xff0c;实现直升机尾翼旋转 1.模型原点问题2.导入模型&#xff08;zhisheng.glb&#xff09;3.导出模型4. 通过 czml 调试代码 某个项目需求&#xff0c;在操作直升机模型的时候&#xff0c;希望直升机机翼和尾翼旋转起来。 机翼旋…
阅读更多...
适配器模式——不兼容结构的协调

适配器模式——不兼容结构的协调

1、简介 1.1、概述 有的笔记本电脑的工作电压是20V&#xff0c;而我国的家庭用电是220V&#xff0c;如何让20V的笔记本电脑能够在220V的电压下工作&#xff1f;答案是引入一个电源适配器&#xff08;AC Adapter&#xff09;&#xff0c;俗称充电器&#xff0f;变压器。有了这…
阅读更多...
Qt 2. QSerialPortInfo显示串口信息

Qt 2. QSerialPortInfo显示串口信息

在ex2.pro 添加&#xff1a; QT serialport//main.cpp #include "ex2.h" #include <QtSerialPort/QtSerialPort> #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Ex2 w;w.show();QList<QSerialPortInfo>…
阅读更多...
xrdp登录显示白屏且红色叉

xrdp登录显示白屏且红色叉

如上图所示&#xff0c;xrdp登录出现了红色叉加白屏&#xff0c;这是因为不正常关闭导致&#xff0c;解决方法其实挺简单的 #进入/usr/tmp cd /usr/tmp #删除对应用户的kdecache-** 文件&#xff08;我这里使用的是kde桌面&#xff09;&#xff0c;例如删除ywj用户对应的文件 …
阅读更多...
Django学习记录：初步认识django以及实现了简单的网页登录页面的前后端开发

Django学习记录：初步认识django以及实现了简单的网页登录页面的前后端开发

Django学习记录&#xff1a;初步认识django以及实现了简单的网页登录页面的前后端开发 1、可以先删去template文件夹&#xff0c;并在setting里面删掉这一行 2、在pycharm中创建app&#xff1a; 3、启动app&#xff1a;编写URL与视图函数关系【urls.py】 ​ 编写视图函数【vi…
阅读更多...
RabbitMQ 教程 | 第5章 RabbitMQ 管理

RabbitMQ 教程 | 第5章 RabbitMQ 管理

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…
阅读更多...
SpringCloud学习路线（13）——分布式搜索ElasticSeach集群

SpringCloud学习路线（13）——分布式搜索ElasticSeach集群

前言 单机ES做数据存储&#xff0c;必然面临两个问题&#xff1a;海量数据的存储&#xff0c;单点故障。 如何解决这两个问题&#xff1f; 海量数据的存储问题&#xff1a; 将索引库从逻辑上拆分为N个分片&#xff08;shard&#xff09;&#xff0c;存储到多个节点。单点故障…
阅读更多...
Mysql 查询统计最近12个月的数据

Mysql 查询统计最近12个月的数据

包括当月: SELECTt1.yf AS month,count( t2.uuid ) AS total FROM(SELECTDATE_FORMAT(( CURDATE()), %Y-%m ) AS yf UNIONSELECTDATE_FORMAT(( CURDATE() - INTERVAL 1 MONTH ), %Y-%m ) AS yf UNIONSELECTDATE_FORMAT(( CURDATE() - INTERVAL 2 MONTH ), %Y-%m ) AS yf UNION…
阅读更多...
F5 LTM 知识点和实验 2-负载均衡基础概念

F5 LTM 知识点和实验 2-负载均衡基础概念

第二章&#xff1a;负载均衡基础概念 目标&#xff1a; 使用网页和TMSH配置virtual servers&#xff0c;pools&#xff0c;monitors&#xff0c;profiles和persistence等。查看统计信息 基础概念&#xff1a; Node一个IP地址。是创建pool池的基础。可以手工创建也可以自动创…
阅读更多...
基于canvas画布的实用类Fabric.js的使用

基于canvas画布的实用类Fabric.js的使用

目录 前言 一、Fabric.js简介 二、开始 1、引入Fabric.js 2、在main.js中使用 3、初始化画布 三、方法 四、事件 1、常用事件 2、事件绑定 3、事件解绑 五、canvas常用属性 六、对象属性 1、基本属性 2、扩展属性 七、图层层级操作 八、复制和粘贴 1、复制 2…
阅读更多...
Redis常用命令

Redis常用命令

目录 Redis通用命令 进入Redis 1.进入redis容器 2.进入redis-cli 查询Redis中储存的key 删除key 查询key的过期时间,以毫秒为单位返回 key 的剩余的过期时间 查询key的数据类型 Redis数据结构 Redis数据查询 1.string 查询key对应的值 设置key对应的值 2.list 查…
阅读更多...
ACL原理

ACL原理

ACL原理 ACL是一种用于控制网络设备访问权限的技术&#xff0c;可以通过配置ACL来限制特定用户、应用程序或网络设备对网络资源的访问。 1、ACL&#xff08;Access Control List&#xff09; 2、ACL是一种包过滤技术。 3、ACL基于IP包头的IP地址、四层TCP/UDP头部的端口号、…
阅读更多...
磁盘均衡器：HDFS Disk Balancer

磁盘均衡器：HDFS Disk Balancer

HDFS Disk Balancer 背景产生的问题以及解决方法 hdfs disk balancer简介HDFS Disk Balancer功能数据传播报告 HDFS Disk Balancer开启相关命令 背景 相比较于个人PC&#xff0c;服务器一般可以通过挂载多块磁盘来扩大单机的存储能力在Hadoop HDFS中&#xff0c;DataNode负责最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023