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

html,css,js的粒子效果

news 文章来源：https://blog.csdn.net/2401_82505179/article/details/145292312 2025/5/19 19:37:28

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

前沿技术趋势洞察：2024年技术的崭新篇章与未来走向！

引言 时光飞逝&#xff0c;2024年已经来临&#xff0c;回顾过去一年&#xff0c;科技的迅猛进步简直让人目不暇接。 在人工智能&#xff08;AI&#xff09;越来越强大的今天&#xff0c;我们不再停留在幻想阶段&#xff0c;量子计算的雏形开始展示它的无穷潜力&#xff0c;Web …...

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

HTML常用属性

HTML标签的常见属性包括许多不同的功能&#xff0c;可以为元素提供附加信息或控制元素的行为。以下是一些常见的属性及其解释&#xff1a; 1. src 描述&#xff1a;src&#xff08;source&#xff09;属性指定一个资源的路径&#xff0c;通常用于图像、音频、视频等标签。常见…...

编程日记 2025/1/23 7:00:55

电子应用设计方案100：智能家庭AI电风扇系统设计

智能家庭 AI 电风扇系统设计 一、引言 智能家庭 AI 电风扇系统旨在为用户提供更加舒适、便捷和个性化的吹风体验&#xff0c;通过融合人工智能技术和先进的控制算法&#xff0c;实现智能化的风速调节、风向控制和场景适应。 二、系统概述 1. 系统目标 - 实现精准的风速调节&a…...

编程日记 2025/1/23 6:57:52

ThinkPHP 8请求处理-获取请求对象与请求上下文

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用Composer初始化ThinkPHP 8应用_thinkphp8 compos…...

编程日记 2025/1/23 6:56:51

工厂模式 - 工厂方法模式、抽象工厂模式

引言 工厂模式&#xff08;Factory Pattern&#xff09;是设计模式中创建型模式的一种&#xff0c;它提供了一种创建对象的最佳方式。工厂模式的核心思想是将对象的创建与使用分离&#xff0c;使得代码更加灵活、可扩展。工厂模式主要分为两种&#xff1a;工厂方法模式和抽象工…...

编程日记 2025/1/23 6:55:49

2025年已过6%

前些阵子&#xff0c;注意到一个网站的年度进度条显示今年已完成4%的进度&#xff0c;而今天是1月22日&#xff0c;再一看已过去6%。如果1个月按30天来计算&#xff0c;1个月也就占一年1/12&#xff0c;差不多在8%-9%左右。 也许你会感觉这6%过得很快&#xff0c;也许你会感觉这…...

编程日记 2025/1/23 6:54:47

C#，入门教程(04)——Visual Studio 2022 数据编程实例：随机数与组合

上一篇&#xff1a; C#&#xff0c;入门教程(03)——Visual Studio 2022编写彩色Hello World与动画效果https://blog.csdn.net/beijinghorn/article/details/123478581 C#&#xff0c;入门教程(01)—— Visual Studio 2022 免费安装的详细图文与动画教程https://blog.csdn.net…...

编程日记 2025/1/23 6:52:42

UWB高精度定位技术在智能仓储中的应用

​在智能化和数字化转型的浪潮中&#xff0c;UWB高精度定位系统逐渐成为企业优化仓储管理和生产调度的关键技术。结合RFID标签打印机和服装生产型ERP软件&#xff0c;这一技术为企业带来了全新的管理方式和效率提升。 UWB高精度定位系统的核心优势 UWB&#xff08;超宽带&…...

编程日记 2025/1/23 6:49:38

计算机毕业设计hadoop+spark视频推荐系统 短视频推荐系统 视频流量预测系统 短视频爬虫 视频数据分析 视频可视化 视频大数据 大数据

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/1/23 6:46:35

【AI编辑器】字节跳动推出AI IDE——Trae，专为中文开发者深度定制

目录 一、背景 二、核心特性 2.1 AI驱动的代码自动生成 2.2 智能问答与代码补全 2.3 多语言支持 2.4 插件与扩展 三、架构 四、下载使用 4.1 下载与安装 4.2 界面与配置 五、应用实践 5.1 快速生成代码 5.2 智能问答与调试 5.3 团队协作与代码审查 六、与Cursor…...

编程日记 2025/1/23 6:45:34