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

html,css,js的粒子效果

news 2026/1/11 15:25:57

这段代码实现了一个基于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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/1/10 16:00:51

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/1/10 20:30:55

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/11/25 7:21:34

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/1/9 13:51:48

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/12/11 1:32:07

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/9 4:14:32

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29