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

html,css,js的粒子效果

news 2026/2/9 14:41: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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43