❤️创意网页：HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

科技感粒子特效网页

动态图展示

静态图展示

图1

图2

视频展示

项目代码解析

HTML 结构

JavaScript 代码

项目完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

科技感粒子特效网页

在本篇技术博客中，我们将学习如何创建一个令人赞叹的科技感粒子特效网页。这个特效网页将会展示一个动态的、精美的粒子效果，同时会随着鼠标的移动而产生连线效果，增添一份炫酷的科技氛围。我们将使用HTML、CSS和JavaScript来实现这个效果。

动态图展示

静态图展示

图1

图2

视频展示

HTML5粒子连接

项目代码解析

HTML 结构

首先，我们来看一下HTML结构。代码中只有一个<canvas>元素，这是我们用来绘制粒子特效的画布。我们也可以通过给<canvas>元素设置背景图片来增加更多的效果。

<!DOCTYPE html>
<html>
<head><title>科技感粒子特效网页</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;background-image: url("your_background_image_url.jpg"); /* 替换成你自己的背景图片URL */background-size: cover;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>// JavaScript 代码将在这里添加</script>
</body>
</html>

JavaScript 代码

现在，让我们来详细解析JavaScript代码部分。这里使用了<script>标签将JavaScript代码嵌入到HTML中。代码的主要功能包括：

创建粒子和连线的类。
初始化粒子数组，并在画布上绘制粒子。
根据鼠标的位置更新粒子的运动状态，并绘制粒子之间的连线。
实现动画效果，使粒子和连线随着时间不断更新。


<script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const particles = [];const connections = [];const particleCount = 300;   // 粒子数量const particleSpeed = 1;     // 粒子移动速度const particleSize = 2;      // 粒子大小const maxDistance = 100;     // 粒子连线的最大距离const lightningColor = "#fff"; // 粒子连线的颜色// 创建粒子类class Particle {constructor() {this.x = Math.random() * width;this.y = Math.random() * height;this.color = "#fff";this.angle = Math.random() * 360;this.speed = Math.random() * particleSpeed;this.opacity = Math.random() * 0.5 + 0.5;}update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;// 如果粒子超出画布范围，则重新随机设置位置if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {this.x = Math.random() * width;this.y = Math.random() * height;}}draw() {ctx.beginPath();ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;ctx.fill();}}// 创建粒子数组function createParticles() {for (let i = 0; i < particleCount; i++) {particles.push(new Particle());}}// 绘制粒子之间的连线function drawConnections() {for (let i = 0; i < particles.length; i++) {for (let j = i + 1; j < particles.length; j++) {const dx = particles[i].x - particles[j].x;const dy = particles[i].y - particles[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {ctx.beginPath();ctx.moveTo(particles[i].x, particles[i].y);ctx.lineTo(particles[j].x, particles[j].y);ctx.strokeStyle = lightningColor;ctx.lineWidth = 0.2 * (1 - distance / maxDistance);ctx.stroke();ctx.closePath();}}}}// 动画循环function animate() {ctx.clearRect(0, 0, width, height);for (const particle of particles) {particle.update();particle.draw();}drawConnections();requestAnimationFrame(animate);}// 监听鼠标移动事件，根据鼠标位置更新粒子运动状态document.addEventListener("mousemove", (e) => {const mouseX = e.clientX;const mouseY = e.clientY;for (const particle of particles) {const dx = mouseX - particle.x;const dy = mouseY - particle.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {particle.angle = Math.atan2(dy, dx);particle.speed = 5;} else {particle.speed = Math.random() * particleSpeed;}}});// 初始化粒子数组并启动动画createParticles();animate();
</script>

项目完整代码

<!DOCTYPE html>
<html>
<head><title>科技感粒子特效网页</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;background-image: url("your_background_image_url.jpg");background-size: cover;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const particles = [];const connections = [];const particleCount = 300;const particleSpeed = 1;const particleSize = 2;const maxDistance = 100;const lightningColor = "#fff";class Particle {constructor() {this.x = Math.random() * width;this.y = Math.random() * height;this.color = "#fff";this.angle = Math.random() * 360;this.speed = Math.random() * particleSpeed;this.opacity = Math.random() * 0.5 + 0.5;}update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {this.x = Math.random() * width;this.y = Math.random() * height;}}draw() {ctx.beginPath();ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;ctx.fill();}}function createParticles() {for (let i = 0; i < particleCount; i++) {particles.push(new Particle());}}function drawConnections() {for (let i = 0; i < particles.length; i++) {for (let j = i + 1; j < particles.length; j++) {const dx = particles[i].x - particles[j].x;const dy = particles[i].y - particles[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {ctx.beginPath();ctx.moveTo(particles[i].x, particles[i].y);ctx.lineTo(particles[j].x, particles[j].y);ctx.strokeStyle = lightningColor;ctx.lineWidth = 0.2 * (1 - distance / maxDistance);ctx.stroke();ctx.closePath();}}}}function animate() {ctx.clearRect(0, 0, width, height);for (const particle of particles) {particle.update();particle.draw();}drawConnections();requestAnimationFrame(animate);}document.addEventListener("mousemove", (e) => {const mouseX = e.clientX;const mouseY = e.clientY;for (const particle of particles) {const dx = mouseX - particle.x;const dy = mouseY - particle.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {particle.angle = Math.atan2(dy, dx);particle.speed = 5;} else {particle.speed = Math.random() * particleSpeed;}}});createParticles();animate();</script>
</body>
</html>