当前位置： 首页 > news >正文

html,css,js的粒子效果

news 2026/2/9 20:46:42

这段代码实现了一个基于HTML5 Canvas的高级粒子效果，用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析：

HTML部分

  • 使用<!DOCTYPE html>声明文档类型。
  • <html>标签内包含了整个网页的内容。
  • <head>部分定义了网页的标题（"高级粒子效果"）和一些基本样式，如设置页面无边距、隐藏滚动条以及黑色背景。
  • <body>包含一个<canvas>元素用于绘图。

CSS部分

  • 设置body的边距为0，并隐藏溢出内容，同时设置背景颜色为黑色。
  • canvas块级显示，确保其占据整个视窗。

JavaScript部分

  1. 初始化Canvas

    • 获取canvas元素并获取2D绘图上下文。
    • 定义resize函数动态调整画布大小以适应窗口尺寸，并在窗口大小改变时调用此函数。

  2. 创建粒子系统

    • 定义了粒子数组particles和粒子数量particleCount。
    • 定义鼠标位置对象mouse用于存储鼠标坐标。
    • Particle类负责创建单个粒子，包括随机初始化位置、速度、大小等属性，并提供重置、绘制及更新方法。

  3. 粒子逻辑

    • 初始化粒子数组，填充指定数量的粒子实例。
    • 监听鼠标移动事件，实时更新鼠标位置。

  4. 动画循环

    • animate函数作为主循环，每帧都会清除屏幕（带透明度），遍历所有粒子执行更新和绘制操作。
    • 在粒子间根据距离条件绘制连线，增加视觉效果。

  5. 粒子特性

    • 粒子具有引力跟随鼠标的功能。
    • 边界检测使粒子在到达画布边缘时反弹。
    • 动态调整粒子大小，创造更生动的效果。

<!DOCTYPE html>
<html>
<head>
    <title>高级粒子效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 设置画布尺寸
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resize();
        window.addEventListener('resize', resize);

        // 创建粒子数组
        const particles = [];
        const particleCount = 100;
        const mouse = { x: null, y: null };

        // 粒子构造函数
        class Particle {
            constructor() {
                this.reset();
                this.baseSize = 2;
            }

            reset() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = -1 + Math.random() * 2;
                this.vy = -1 + Math.random() * 2;
                this.radius = this.baseSize + Math.random() * 2;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `hsl(${(this.x/canvas.width)*360}, 70%, 50%)`;
                ctx.fill();
            }

            update() {
                // 鼠标引力
                const dx = mouse.x - this.x;
                const dy = mouse.y - this.y;
                const distance = Math.sqrt(dx*dx + dy*dy);
                const force = (canvas.width/2 - distance) / canvas.width/2;

                if (distance < canvas.width/2) {
                    this.x += dx * force * 0.1;
                    this.y += dy * force * 0.1;
                }

                this.x += this.vx;
                this.y += this.vy;

                // 边界反弹
                if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;

                // 动态大小
                this.radius = this.baseSize + Math.abs(Math.sin(Date.now()*0.001 + this.x)) * 2;
            }
        }

        // 初始化粒子
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        // 鼠标移动监听
        canvas.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        });

        // 动画循环
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            particles.forEach((p1, i) => {
                p1.update();
                p1.draw();

                // 绘制粒子间连线
                particles.slice(i).forEach(p2 => {
                    const dx = p1.x - p2.x;
                    const dy = p1.y - p2.y;
                    const distance = Math.sqrt(dx*dx + dy*dy);

                    if (distance < 100) {
                        ctx.beginPath();
                        ctx.strokeStyle = `hsl(${(i/particleCount)*360}, 70%, 50%)`;
                        ctx.lineWidth = 0.5;
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>

相关文章：

html,css,js的粒子效果

这段代码实现了一个基于HTML5 Canvas的高级粒子效果&#xff0c;用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析&#xff1a; HTML部分 使用<!DOCTYPE html>声明文档类型。<html>标签内包含了整个网页的内容。<head>部分定义了网页的标题&#x…...

编程日记 2025/1/23 8:08:45

Spring Boot + Netty + WebSocket 实现消息推送

1、关于Netty Netty 是一个利用 Java 的高级网络的能力&#xff0c;隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。 2、Maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/io.netty/netty-all --><dependency><gr…...

编程日记 2025/1/23 8:07:43

Python3 【字符串】：方法和函数使用示例手册

Python3 【字符串】&#xff1a;方法和函数使用示例手册 Python 提供了丰富的字符串处理方法和函数&#xff0c;以下是一些常用的方法和函数分类整理&#xff0c;并提供详细使用示例&#xff0c;简单易懂&#xff0c;值得收藏。 1. 字符串大小写转换 str.upper()&#xff1a;…...

编程日记 2025/1/23 8:01:33

数据结构与算法整理复习（一）：数据结构概念与线性表

目录 第一章&#xff1a;绪论 1.1 数据结构的基本概念 1.2 算法与算法评价 第二章&#xff1a;线性表 2.1 线性表的定义和基本操作 2.2 线性表的顺序表示&#xff08;顺序表&#xff09; 应用题 2.3 线性表的链式表达&#xff08;链表&#xff09; 2.3.1 单链表 2.3.2…...

编程日记 2025/1/23 7:59:31

【Block总结】PConv风车卷积，更大的感受野，提高特征提取能力|即插即用

论文信息 论文标题&#xff1a;《Pinwheel-shaped Convolution and Scale-based Dynamic Loss for Infrared Small Target Detection》 论文链接&#xff1a;https://arxiv.org/pdf/2412.16986 GitHub链接&#xff1a;https://github.com/JN-Yang/PConv-SDloss-Data 创新点 …...

编程日记 2025/1/23 7:56:28

Python新春烟花

目录 系列文章 写在前面 技术需求 完整代码 下载代码 代码分析 1. 程序初始化与显示设置 2. 烟花类 (Firework) 3. 粒子类 (Particle) 4. 痕迹类 (Trail) 5. 烟花更新与显示 6. 主函数 (fire) 7. 游戏循环 8. 总结 注意事项 写在后面 系列文章 序号直达链接爱…...

编程日记 2025/1/23 7:53:24

VirtualBox can‘t enable the AMD-V extension

个人博客地址&#xff1a;VirtualBox cant enable the AMD-V extension | 一张假钞的真实世界 最近一次完成Deepin的系统更新后&#xff0c;进入VirtualBox创建的虚拟机&#xff08;Widows10&#xff09;时&#xff0c;出现以下错误&#xff1a; 根据网址“https://askubuntu.…...

编程日记 2025/1/23 7:51:22

掘金--创意标题匹配问题

问题描述 在广告平台中&#xff0c;为了给广告主一定的自由性和效率&#xff0c;允许广告主在创造标题的时候以通配符的方式进行创意提交。线上服务的时候&#xff0c;会根据用户的搜索词触发的 bidword 对创意中的通配符&#xff08;通配符是用成对 {} 括起来的字符串&#x…...

编程日记 2025/1/23 7:50:21

OBU和T-Box

OBU&#xff08;On-Board Unit&#xff0c;车载单元&#xff09;和T-Box&#xff08;Telematics Box&#xff0c;远程信息处理控制单元&#xff09;都是用于车联网和智能交通系统的车载设备&#xff0c;但它们的功能、应用场景和技术特点存在显著差异。以下是两者的详细对比&am…...

编程日记 2025/1/23 7:48:19

【PVE】Proxmox VE8.0+创建LXC容器安装docker

为了不影响PVE宿主机&#xff0c;通常使用套娃的形式安装Docker容器&#xff0c;再安装相关docker应用。首先在CT模板中创建 Linux 容器&#xff0c;推荐使用Debian。开启ssh登录&#xff0c;修改debian配置&#xff0c;安装docker 一、创建 LXC 容器 1、CT模板下载 点击“模…...

编程日记 2025/1/23 7:47:18

一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk

文章目录 一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk1. 建议按文章顺序从头看&#xff0c;一看到底&#xff0c;豁然开朗2. 啥是chunkIds3.怎么使用chunkIds4. 啥是runtimeChunk5. 怎么使用runtimeChunk 一文大白话讲清楚webpack基本使用——11——chun…...

编程日记 2025/1/23 7:37:06

Java 中的设计模式：经典与现代实践

Java 中的设计模式&#xff1a;经典与现代实践 1. 设计模式简介 设计模式是一种软件开发中的思想&#xff0c;它为我们提供了一些经过验证的、能够应对常见问题的解决方案。学习和掌握设计模式能够让开发者在面对复杂的需求时&#xff0c;能够设计出更加灵活、可维护的代码。…...

编程日记 2025/1/23 7:29:59

DRG_DIP 2.0时代医院程序结构转型与数据结构优化研究

一、引言 1.1 DRG_DIP 2.0 改革背景与意义 医保支付方式改革在医疗保障制度改革中占据着极为关键的地位&#xff0c;是推动医疗领域变革的核心力量。它犹如一把精准的手术刀&#xff0c;对医疗资源的合理分配、医疗服务质量的稳步提升以及医疗费用的有效控制起着决定性作用。…...

编程日记 2025/1/23 7:28:56

一部手机如何配置内网电脑同时访问内外网

做过运维的朋友都知道&#xff0c;最麻烦的是运维电脑不能远程&#xff0c;每次都得现场进行维护&#xff0c;明明客户那边有可以访问内网的电脑&#xff0c;怎么操作能将这台电脑能访问跟到外网呢&#xff0c;这样不就能通过远程软件远程了吗&#xff1f;嘿嘿。按以下步骤试试…...

编程日记 2025/1/23 7:23:47

国产低功耗带LCD驱动和触摸按键功能的MCU

以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性&#xff0c;结合性能、功耗和适用场景进行综合推荐&#xff1a; 1.灵动微MM32L0130系列 257 核心特性&#xff1a;低功耗&#xff1a;待机模式功耗低至100nA&#xff0c;支持多种低功耗模式。 LCD驱动&a…...

编程日记 2025/1/23 7:20:43

XCP 协议基础

文章目录 一、XCP 简介二、XCP的主要功能三、什么是标定四、什么时候进行标定五、标定的意义六、标定的三层架构XCP协议 和 CCP协议的区别参考 一、XCP 简介 XCP 协议的全称为 eXtended Calibration Protocol&#xff0c;即扩展标定协议。 另有其他定义&#xff0c;XCP 协议全…...

编程日记 2025/1/23 7:16:33

Swift 中 Codable 和 Hashable 的理解

最近初学Swift&#xff0c;碰到下面的代码脑袋里冒出疑问&#xff1a;Codable 和 Hashable是啥&#xff1f;怎么理解&#xff1f; struct Landmark: Hashable, Codable {var id: Intvar name: Stringvar park: Stringvar state: Stringvar description: String }针对上面的疑问…...

编程日记 2025/1/23 7:13:26

基于 WPF 平台实现成语游戏

一、引言 在软件开发领域&#xff0c;利用各种框架开发有趣的应用程序是提升技术能力和增加开发乐趣的有效方式。WPF&#xff08;Windows Presentation Foundation&#xff09;作为微软强大的桌面应用开发框架&#xff0c;提供了丰富的图形和交互功能。本文将带领大家基于 WPF…...

编程日记 2025/1/23 7:08:14

2024“博客之星”——我的博客成长与技术洞察

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 目录 一、引言二、个人成长与突破盘点&#xff08;一&#xff09;技能提升与知识拓展&#xff08;二&#xff09;创作风格与影响力提升&#xf…...

编程日记 2025/1/23 7:07:07

HTTPS协议简述

HTTPS 协议简介 HTTPS 是 HTTP Security 的组合&#xff0c;即在 HTTP 的基础上加入了安全性机制&#xff0c;主要通过加密传输、身份认证和数据完整性保护来确保通信的安全性。 为了实现这一目标&#xff0c;HTTPS 引入了 加密技术&#xff0c;包括对称加密、非对称加密和数…...

编程日记 2025/1/23 7:06:05

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2026/1/31 7:11:11

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

编程新知 2025/11/17 0:00:05

Linux安全加固：从攻防视角构建系统免疫

Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...

编程新知 2025/9/30 15:48:08

从零开始了解数据采集（二十八）——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

编程新知 2026/2/6 5:58:12

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2026/2/8 10:47:16