科技感粒子特效网页
创作时间:
作者:
@小白创作中心
科技感粒子特效网页
引用
1
来源
1.
https://cloud.tencent.com/developer/article/2398950
本文将介绍如何使用HTML5和Canvas创建一个科技感粒子特效网页。这个特效网页会展示一个动态的、精美的粒子效果，并且会随着鼠标的移动而产生连线效果，增添一份炫酷的科技氛围。我们将使用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>
代码的使用方法（超简单什么都不用下载）
- 打开记事本
- 将上面的源代码复制粘贴到记事本里面
- 将文件另存为HTML文件
- 打开html文件（大功告成）
热门推荐
如何计算和理解投资指标中的PEG值？这些计算方法有哪些实际应用？
山东“最低调”的海滨城市，比青岛物价低，比威海小众，景美人少
旅居，为什么选择德宏？
【保护未成年人】事关未成年人上网，重要指南来了！
红枣富含哪些营养素呢
探究传统的藏族节日习俗
读心术设备即将到来——我们如何控制？
八字火太旺的影响与调和之道
枣子和蜂蜜泡水喝有什么好处
需求响应动态冰蓄冷系统与需求响应策略的优化研究
法庭审理减刑假释案例：哪些因素会影响判决结果？
2025年度急诊科多学科协作培训计划
DS1302(时钟芯片)与51单片机，lcd1602和数码管结合使用，附仿真示例
经常使用耳机听音乐伤耳朵？听力专家提示安全使用耳机的技巧
如何进行合理的财富规划？这种规划有哪些步骤？
沈阳墓园咨询中心解读公益性墓地与经营性墓地的关系
普法战争：一场重塑欧洲格局的战争
广东高净值家庭数量全国领跑！《2024胡润财富报告》出炉
网络禁售狗肉：原因及法律规定解析
地下3000米新生物以铀为生，科学家惊叹：地球生命奥秘再添新章
能否提前检查预防老年痴呆症和脑中风
UCLA 领衔！2025 U.S.News 全美最佳公立大学排名震撼发布！
如何利用5日均线分析市场趋势与投资决策的要点解读
红楼梦：从脂砚斋批语里的蛛丝马迹，破解贾府四春之命运结局
补中气的中药有哪些？五种常见药材的功效与使用方法
PID算法详解：从基础原理到电机闭环控制实战
开放API平台的运营与商业模式
市场热点挖掘技巧：如何寻找股票的热点板块
喝什么茶可以消肿：肝囊肿、小腿浮肿、淋巴结肿大、甲状腺肿大
历史上曹操两征徐州到底有多惨烈？