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，一经查实，立即删除！

相关文章

vue2入门学习路线指引

vue2入门学习路线指引

1.插值表达式 2.指令v-bind 3.指令v-for 4.指令v-text和v-html 5.指令v-if和v-show 6.指令v-if, v-else-if和v-else 7.指令v-on和methods 8.指令v-on事件对象,事件修饰符和按键修饰符 9.指令v-model双向绑定和v-model修饰符 10.动态修改标签的class样式 11.动态修改标签的style…
阅读更多...
MySql 知识大汇总

MySql 知识大汇总

数据库索引 数据库索引是一种数据结构&#xff0c;用于提高数据库查询的速度和效率。索引可以看作是表中一列或多列的值的快速查找方式&#xff0c;类似于书籍的目录。通过创建索引&#xff0c;可以减少数据库的扫描量&#xff0c;加快数据的检索速度。 常见的索引类型 常见…
阅读更多...
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…
阅读更多...
linux/drivers/leds/leds-gpio.c学习

linux/drivers/leds/leds-gpio.c学习

linux/drivers/leds/leds-gpio.c学习 linux/drivers/leds/leds-gpio.c 是 Linux 内核中的一个驱动程序文件&#xff0c;用于控制 GPIO 引脚上的 LED 灯。下面是对该文件的更详细解读&#xff1a; 1. 头文件引入&#xff1a;该文件引入了一些必要的头文件&#xff0c;包括 <…
阅读更多...
Kotlin Multiplatform 使用 CocoaPods 创建多平台分发库

Kotlin Multiplatform 使用 CocoaPods 创建多平台分发库

Kotlin Multiplatform 支持直接创建Framework 方式和使用CocoaPods 方式创建Framework。 1、不同之处在于创建的时候需要选择不同的方式。 2、使用CocoaPods 方式还需要在 build.gradle(.kts) 文件中添加内容 在build.gradle(.kts) 文件中添加完成后，执行一下文件。剩下的集成…
阅读更多...
Java和Python一些处理sql方式总结

Java和Python一些处理sql方式总结

将查询结果导入csv文件中 public static int executeUpdate(String sql, Object[] param) {//创建一个PreparedStatement对象用来操作数据库PreparedStatement pstmt null;//getConnection()方法为我自己定义的获取数据库连接的方法pstmt getConnection().prepareStatement(s…
阅读更多...
基于Matlab实现指纹识别技术（附上完整源码）

基于Matlab实现指纹识别技术（附上完整源码）

指纹识别是一种常用的生物识别技术&#xff0c;具有独特性高、可靠性强的特点。本文介绍了基于Matlab的指纹识别技术实现的方法和步骤。首先&#xff0c;对指纹图像进行预处理&#xff0c;包括图像增强和去噪处理。然后&#xff0c;使用特征提取算法提取指纹特征。最后&#xf…
阅读更多...
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"…
阅读更多...
【adb】adb常用命令

【adb】adb常用命令

Android Debug Bridge (adb) Android 调试桥 (adb) 是一种功能多样的命令行工具&#xff0c;可让您与设备进行通信。adb 命令可用于执行各种设备操作&#xff0c;例如安装和调试应用。adb 提供对 Unix shell&#xff08;可用来在设备上运行各种命令&#xff09;的访问权限。它…
阅读更多...
Mac 终端美化显示

Mac 终端美化显示

Linux 也可安装 Zsh 后使用此套配置。 1. 安装 Oh My Zsh sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"2. 更换主题&#xff0c;修改文件&#xff1a;~/.zshrc&#xff0c;原内容&#xff1a; ZSH_THEME&quo…
阅读更多...
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…
阅读更多...
Matlab实现遗传算法仿真（附上40个仿真源码）

Matlab实现遗传算法仿真（附上40个仿真源码）

遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;是一种基于生物进化理论的优化算法&#xff0c;通过模拟自然界中的遗传过程&#xff0c;来寻找最优解。 在遗传算法中&#xff0c;每个解被称为个体&#xff0c;每个个体由一组基因表示&#xff0c;每个基因是…
阅读更多...
介绍下Django中的表单（forms）模块中的类forms.CharField

介绍下Django中的表单（forms）模块中的类forms.CharField

在Django中&#xff0c;forms.CharField() 是用于定义表单字段的类&#xff0c;它属于 Django 的表单&#xff08;forms&#xff09;模块。CharField 是用于处理字符型数据的表单字段类。它允许用户在表单中输入文本数据&#xff0c;并对该数据进行验证和处理。 forms.CharFie…
阅读更多...
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;希望直升机机翼和尾翼旋转起来。 机翼旋…
阅读更多...
Pytorch参数优化

Pytorch参数优化

前言&#xff1a; 当我们训练神经网络时&#xff0c;我们需要调整模型的参数&#xff0c;使得损失函数的值逐渐减小&#xff0c;从而优化模型。但是模型的参数我们一般是无法看见的&#xff0c;所以我们必须学会对参数的更新&#xff0c;下面&#xff0c;我将介绍两种参数更新的…
阅读更多...
适配器模式——不兼容结构的协调

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

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

Copyright @ 2022~2023