【趣味Html】第11课：动态闪烁发光粒子五角星
打造炫酷的动态闪烁发光粒子五角星效果
前言
在现代Web开发中，视觉效果的重要性不言而喻。今天我们将深入探讨如何使用HTML5 Canvas和JavaScript创建一个令人惊艳的动态闪烁发光粒子五角星效果。这个项目不仅展示了Canvas的强大功能，还涉及了粒子系统、动画循环、数学计算等多个技术要点。
项目概述
我们创建的效果包含以下特性：
- 🌟 自动旋转的五角星
- ✨ 动态发光效果（呼吸灯效果）
- 🎆 粒子系统（从五角星边缘发射粒子）
- 🎮 鼠标交互（靠近时产生更多粒子）
- 📱 响应式设计
技术架构
1. 基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态闪烁发光粒子五角星</title><style>body {margin: 0;padding: 0;background: #000;overflow: hidden;display: flex;justify-content: center;align-items: center;height: 100vh;}canvas {border: 1px solid #333;}</style>
</head>
<body><canvas id="starCanvas"></canvas>
</body>
</html>
2. 核心类设计
Particle 类（粒子系统）
粒子类是整个效果的核心组件之一，负责创建和管理单个粒子的行为：
class Particle {constructor(x, y) {this.x = x; // 粒子位置this.y = y;this.vx = (Math.random() - 0.5) * 2; // 随机速度this.vy = (Math.random() - 0.5) * 2;this.life = 1; // 生命值this.decay = Math.random() * 0.02 + 0.005; // 衰减速度this.size = Math.random() * 3 + 1; // 粒子大小this.color = { // 随机颜色r: Math.random() * 100 + 155,g: Math.random() * 100 + 155,b: Math.random() * 100 + 155};}update() {this.x += this.vx; // 更新位置this.y += this.vy;this.life -= this.decay; // 减少生命值this.size *= 0.99; // 缩小粒子}draw() {// 绘制发光效果和粒子本体}
}
设计要点：
- 使用随机值创建自然的粒子运动
- 生命周期管理确保粒子会自然消失
- 渐变发光效果增强视觉冲击力
Star 类（五角星系统）
五角星类管理五角星的绘制、旋转和粒子生成：
class Star {constructor(x, y, size) {this.x = x;this.y = y;this.size = size;this.rotation = 0; // 旋转角度this.glowIntensity = 0; // 发光强度this.glowDirection = 1; // 发光方向this.particles = []; // 粒子数组this.lastParticleTime = 0; // 上次生成粒子的时间}getStarPoints() {// 计算五角星的10个顶点坐标const points = [];const outerRadius = this.size;const innerRadius = this.size * 0.4;for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation;const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = this.x + Math.cos(angle) * radius;const y = this.y + Math.sin(angle) * radius;points.push({ x, y });}return points;}
}
核心算法解析
1. 五角星顶点计算
五角星的绘制是基于数学计算的。一个标准五角星有10个顶点（5个外顶点和5个内顶点）：
// 五角星顶点计算公式
for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation; // 每个顶点间隔36度const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = centerX + Math.cos(angle) * radius;const y = centerY + Math.sin(angle) * radius;
}
数学原理：
- 五角星的外角为36°（2π/10）
- 内外半径比例约为0.4，创造最佳视觉效果
- 通过旋转角度实现动态旋转
2. 粒子生成策略
粒子的生成采用了多种策略来创造丰富的视觉效果：
generateParticles() {const points = this.getStarPoints();// 策略1：在五角星边缘生成粒子for (let i = 0; i < points.length; i++) {const point = points[i];const nextPoint = points[(i + 1) % points.length];// 线性插值在边缘随机位置生成粒子const t = Math.random();const x = point.x + (nextPoint.x - point.x) * t;const y = point.y + (nextPoint.y - point.y) * t;if (Math.random() < 0.3) {this.particles.push(new Particle(x, y));}}// 策略2：在顶点生成更多粒子for (let i = 0; i < points.length; i += 2) {const point = points[i];if (Math.random() < 0.5) {this.particles.push(new Particle(point.x, point.y));}}
}
3. 发光效果实现
发光效果通过Canvas的阴影和渐变功能实现：
// 动态发光强度
this.glowIntensity += this.glowDirection * 0.02;
if (this.glowIntensity >= 1 || this.glowIntensity <= 0) {this.glowDirection *= -1; // 反向，创造呼吸效果
}// 应用发光效果
ctx.shadowColor = `rgba(255, 255, 100, ${this.glowIntensity})`;
ctx.shadowBlur = 20 + this.glowIntensity * 30;
性能优化技巧
1. 粒子生命周期管理
// 高效的粒子清理
this.particles = this.particles.filter(particle => {particle.update();return particle.life > 0; // 只保留活着的粒子
});
2. 时间控制的粒子生成
// 避免每帧都生成粒子，控制生成频率
const now = Date.now();
if (now - this.lastParticleTime > 50) {this.generateParticles();this.lastParticleTime = now;
}
3. 渐进式画布清理
// 使用半透明矩形而非完全清除，创造拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
交互设计
鼠标交互
canvas.addEventListener('mousemove', (e) => {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;stars.forEach(star => {const dx = mouseX - star.x;const dy = mouseY - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 150) {// 鼠标靠近时增加粒子生成for (let i = 0; i < 3; i++) {const angle = Math.random() * Math.PI * 2;const radius = Math.random() * star.size;const x = star.x + Math.cos(angle) * radius;const y = star.y + Math.sin(angle) * radius;star.particles.push(new Particle(x, y));}}});
});
响应式设计
window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 重新定位五角星stars.forEach((star, i) => {star.x = canvas.width / 4 + (i * canvas.width / 4);star.y = canvas.height / 2 + Math.sin(i * 2) * 100;});
});
扩展可能性
1. 颜色主题
可以添加多种颜色主题，让用户选择不同的视觉风格：
const themes = {golden: { r: 255, g: 215, b: 0 },blue: { r: 100, g: 150, b: 255 },purple: { r: 200, g: 100, b: 255 }
};
2. 音频响应
可以集成Web Audio API，让粒子效果响应音频频率：
// 伪代码
const audioContext = new AudioContext();
// 根据音频频率调整粒子生成速度和五角星大小
3. 3D效果
使用WebGL或Three.js可以将效果扩展到3D空间。
总结
这个动态闪烁发光粒子五角星项目展示了现代Web技术的强大能力。通过合理的类设计、数学计算、性能优化和交互设计，我们创造了一个既美观又高效的视觉效果。
关键技术点：
- Canvas 2D API的高级应用
- 面向对象的JavaScript设计
- 数学在图形编程中的应用
- 性能优化策略
- 用户交互设计
这个项目不仅可以作为学习Canvas和JavaScript的优秀案例，也可以作为更复杂视觉效果的基础框架。希望这篇博客能够帮助你理解现代Web图形编程的精髓，并激发你创造更多令人惊艳的视觉效果！
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态闪烁发光粒子五角星</title><style>body {margin: 0;padding: 0;background: #000;overflow: hidden;display: flex;justify-content: center;align-items: center;height: 100vh;}canvas {border: 1px solid #333;}</style>
</head>
<body><canvas id="starCanvas"></canvas><script>const canvas = document.getElementById('starCanvas');const ctx = canvas.getContext('2d');// 设置画布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 粒子类class Particle {constructor(x, y) {this.x = x;this.y = y;this.vx = (Math.random() - 0.5) * 2;this.vy = (Math.random() - 0.5) * 2;this.life = 1;this.decay = Math.random() * 0.02 + 0.005;this.size = Math.random() * 3 + 1;this.color = {r: Math.random() * 100 + 155,g: Math.random() * 100 + 155,b: Math.random() * 100 + 155};}update() {this.x += this.vx;this.y += this.vy;this.life -= this.decay;this.size *= 0.99;}draw() {ctx.save();ctx.globalAlpha = this.life;// 创建发光效果const gradient = ctx.createRadialGradient(this.x, this.y, 0,this.x, this.y, this.size * 3);gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`);gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.5)`);gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);ctx.fillStyle = gradient;ctx.beginPath();ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);ctx.fill();// 绘制核心粒子ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 1)`;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();ctx.restore();}}// 五角星类class Star {constructor(x, y, size) {this.x = x;this.y = y;this.size = size;this.rotation = 0;this.glowIntensity = 0;this.glowDirection = 1;this.particles = [];this.lastParticleTime = 0;}// 计算五角星的顶点getStarPoints() {const points = [];const outerRadius = this.size;const innerRadius = this.size * 0.4;for (let i = 0; i < 10; i++) {const angle = (i * Math.PI) / 5 + this.rotation;const radius = i % 2 === 0 ? outerRadius : innerRadius;const x = this.x + Math.cos(angle) * radius;const y = this.y + Math.sin(angle) * radius;points.push({ x, y });}return points;}update() {this.rotation += 0.01;// 更新发光强度this.glowIntensity += this.glowDirection * 0.02;if (this.glowIntensity >= 1 || this.glowIntensity <= 0) {this.glowDirection *= -1;}// 生成粒子const now = Date.now();if (now - this.lastParticleTime > 50) {this.generateParticles();this.lastParticleTime = now;}// 更新粒子this.particles = this.particles.filter(particle => {particle.update();return particle.life > 0;});}generateParticles() {const points = this.getStarPoints();// 在五角星边缘生成粒子for (let i = 0; i < points.length; i++) {const point = points[i];const nextPoint = points[(i + 1) % points.length];// 在边缘随机位置生成粒子const t = Math.random();const x = point.x + (nextPoint.x - point.x) * t;const y = point.y + (nextPoint.y - point.y) * t;if (Math.random() < 0.3) {this.particles.push(new Particle(x, y));}}// 在五角星顶点生成更多粒子for (let i = 0; i < points.length; i += 2) {const point = points[i];if (Math.random() < 0.5) {this.particles.push(new Particle(point.x, point.y));}}}draw() {const points = this.getStarPoints();// 绘制发光效果ctx.save();ctx.shadowColor = `rgba(255, 255, 100, ${this.glowIntensity})`;ctx.shadowBlur = 20 + this.glowIntensity * 30;// 绘制五角星主体ctx.fillStyle = `rgba(255, 255, 150, ${0.8 + this.glowIntensity * 0.2})`;ctx.strokeStyle = `rgba(255, 255, 200, ${0.9 + this.glowIntensity * 0.1})`;ctx.lineWidth = 2;ctx.beginPath();ctx.moveTo(points[0].x, points[0].y);for (let i = 1; i < points.length; i++) {ctx.lineTo(points[i].x, points[i].y);}ctx.closePath();ctx.fill();ctx.stroke();ctx.restore();// 绘制粒子this.particles.forEach(particle => particle.draw());}}// 创建多个五角星const stars = [];const numStars = 3;for (let i = 0; i < numStars; i++) {const x = canvas.width / 4 + (i * canvas.width / 4);const y = canvas.height / 2 + Math.sin(i * 2) * 100;const size = 50 + Math.random() * 30;stars.push(new Star(x, y, size));}// 动画循环function animate() {// 清除画布ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 更新和绘制所有五角星stars.forEach(star => {star.update();star.draw();});requestAnimationFrame(animate);}// 窗口大小调整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 重新定位五角星stars.forEach((star, i) => {star.x = canvas.width / 4 + (i * canvas.width / 4);star.y = canvas.height / 2 + Math.sin(i * 2) * 100;});});// 鼠标交互canvas.addEventListener('mousemove', (e) => {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;stars.forEach(star => {const dx = mouseX - star.x;const dy = mouseY - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 150) {// 鼠标靠近时增加粒子生成for (let i = 0; i < 3; i++) {const angle = Math.random() * Math.PI * 2;const radius = Math.random() * star.size;const x = star.x + Math.cos(angle) * radius;const y = star.y + Math.sin(angle) * radius;star.particles.push(new Particle(x, y));}}});});// 开始动画animate();</script>
</body>
</html>
如果你觉得这个效果有趣，不妨尝试修改参数，创造属于你自己的独特效果！
相关文章：
【趣味Html】第11课：动态闪烁发光粒子五角星
打造炫酷的动态闪烁发光粒子五角星效果 前言 在现代Web开发中，视觉效果的重要性不言而喻。今天我们将深入探讨如何使用HTML5 Canvas和JavaScript创建一个令人惊艳的动态闪烁发光粒子五角星效果。这个项目不仅展示了Canvas的强大功能，还涉及了粒子系统、…...
AnyIO Event：异步编程中的同步利器
在异步编程的世界里，任务之间的通信和协调是一个常见的需求。AnyIO 提供的 Event 类，为这一需求提供了一个强大而简洁的解决方案。本文将深入探讨 anyio.Event 的使用方法、特点以及在实际应用中的最佳实践。 一、AnyIO Event 概述 anyio.Event 是 Any…...
CFTel：一种基于云雾自动化的鲁棒且可扩展的远程机器人架构
中文标题： CFTel：一种基于云雾自动化的鲁棒且可扩展的远程机器人架构 英文标题： CFTel: A Practical Architecture for Robust and Scalable Telerobotics with Cloud-Fog Automation 作者信息 Thien Tran, Jonathan Kua, Minh Tran, Hongh…...
Educational Codeforces Round 179 (Rated for Div. 2)
CF2111,简单手速场 A. Energy Crystals 贪心，每次最小值会乘2，直接模拟即可，复杂度 O ( log n ) O(\log n) O(logn) void solve(){int x;cin>>x;multiset<int> s{0,0,0};int res0;while(*s.begin()<x){int x*s.begin();s…...
完成一个可交互的k8s管理平台的页面开发
使用deepseek完成设计一个k8s管理平台，关键词如下： 完成一个可交互的k8s管理平台的页面开发Kubernetes 管理平台页面设计 下面是一个基于现代Web技术的可交互Kubernetes管理平台的页面设计方案，使用React作为前端框架，配合Ant De…...
多线程编程技术解析及示例：pthread_cond_timedwait、pthread_mutex_lock 和 pthread_mutex_trylock
多线程编程技术解析及示例：pthread_cond_timedwait、pthread_mutex_lock 和 pthread_mutex_trylock 摘要 本文深入解析了多线程编程中 pthread_cond_timedwait、pthread_mutex_lock 和 pthread_mutex_trylock 三个函数的功能、使用场景及注意事项，并通…...
vue实现点击单选或者多选模式
toggleSelect(item) { if (!this.single) { // 多选模式 const itemIndex this.selectedItems.findIndex( (selectedItem) > selectedItem.userId item.userId ); // 假设每个对象都有一个唯一的id属性 if (itemIndex ! -1) { this.selectedItems.splice(itemIndex, 1); }…...
Windows系统工具：WinToolsPlus 之 SQL Server 日志清理
使用软件时提示数据库事务日志已满， 使用WinToolsPlus 数据库页签 先设置 数据源 ， 选择 需要清理日志的数据库， 点击 数据库日志清理 即可。 下载地址： http://v.s3.sh.cn/archives/2279.html...
在Windows11上安装 Ubuntu WSL
不想安装虚拟机,想在Windows11上运行Linux。网上虽有教程,但是图片明显都是老图,与Windows11还是有些差异。网上缺乏一个齐全的真正的Windows11运行Linux的教程。 一、在Windows上的设置 1. 在window11的搜索框内(所有你找不到的应用都可以用这个搜索功能)，搜索&q…...
嵌入式Linux之RK3568
系统烧写镜像。 1、直接使用正点原子官方的updata.img(MIDP) 进入瑞芯微发开工具RKDevTool，选择升级固件，上传到固件，记住这里要进入maskrom模式或者是loader模式，进入该模式之后点击升级即可。 2、烧入自己制作的镜像(单独、一…...
Elasticsearch的插件（Plugin）系统介绍
Elasticsearch的插件（Plugin）系统是一种扩展机制，允许用户通过添加自定义功能来增强默认功能，而无需修改核心代码。插件可以提供从分析器、存储后端到安全认证、机器学习等各种功能，使Elasticsearch能够灵活适应不同的应用场景和业务需求。 一、插件的核心特点 模块化扩展…...
提取 PDF 文件中的文字以及图片中的文字
Adobe 提供了多种方案可以快速提取 PDF 文件中的文字以及图片中的文字，主要依赖其 Acrobat 系列产品和 OCR（光学字符识别）技术。以下是具体解决方案的概述，涵盖了文字和图片文字的提取方法： 1. 提取 PDF 中的文字 如果…...
JavaScript性能优化实战技术
目录 性能优化核心原则 代码层面优化 加载优化策略 内存管理实践 及时解除事件监听 避免内存泄漏模式 渲染性能调优 使用requestAnimationFrame优化动画 批量DOM操作减少回流 性能监控工具 现代API应用 缓存策略实施 性能优化核心原则 减少资源加载时间 避免阻塞主…...
LeetCode 热题 100 739. 每日温度
LeetCode 热题 100 | 739. 每日温度 大家好，今天我们来解决一道经典的算法题——每日温度。这道题在 LeetCode 上被标记为中等难度，要求我们找到一个数组，其中每个元素表示从当前天开始，下一个更高温度出现的天数。如果之后没有更…...
网页前端开发（基础进阶3--Vue）
Vue3 Vue是一款用于构建用户界面的渐进式的JavaScript框架。 Vue由2部分组成：Vue核心包，Vue插件包 Vue核心包包含：声明式渲染，组件系统。 Vue插件包：VueRouter（客户端路由），Vuex…...
tryhackme——Abusing Windows Internals（进程注入）
文章目录 一、Abusing Processes二、进程镂空三、线程劫持四、DLL注入五、Memory Execution Alternatives 一、Abusing Processes 操作系统上运行的应用程序可以包含一个或多个进程，进程表示正在执行的程序。进程包含许多其他子组件，并且直接与内存或虚…...
【游戏科学】游戏开发中数学算法的核心与应用
一、游戏科学（Game Science） 涉及大量数学算法和模型，用于实现物理模拟、图形渲染、人工智能、路径规划、碰撞检测等核心功能。 1.1、图形渲染与几何计算 1. 三维变换（3D Transformations） 矩阵变换： 模…...
【Day44】
DAY 44 预训练模型 知识点回顾： 预训练的概念常见的分类预训练模型图像预训练模型的发展史预训练的策略预训练代码实战：resnet18 作业： 尝试在cifar10对比如下其他的预训练模型，观察差异，尽可能和他人选择的不同尝试通…...
基于 Alpine 定制单功能用途(kiosk)电脑
前言 故事回到 7 年前, 在网上冲浪的时候发现了一篇介绍使用 Ubuntu 打造 kiosk 单功能用途电脑的文章, 挺好玩的, 就翻译了一下并比葫芦画瓢先后用了 CentOS 7, ArchLinux 进行了实现. 历史文章: 翻译 - 使用Ubutnu14.04和Chrome打造单功能用途电脑(大屏展示电脑) 使用CentOS…...
知识图谱系统功能实现，技术解决方案，附源码
基于Java、Neo4j和ElasticSearch构建的医疗知识图谱知识库，是一个融合图数据库技术与搜索引擎的智能化医疗知识管理系统。该系统以Neo4j图数据库为核心，利用其高效的图结构存储能力，将疾病、症状、药品、检查项目、科室等医疗实体抽象为节点&…...
第12节 Node.js 函数
在JavaScript中，一个函数可以作为另一个函数接收一个参数。我们可以先定义一个函数，然后传递，也可以在传递参数的地方直接定义函数。 Node.js中函数的使用与Javascript类似，举例来说，你可以这样做： funct…...
洛谷P12610 ——[CCC 2025 Junior] Donut Shop
题目背景 Score: 15. 题目描述 The owner of a donut shop spends the day baking and selling donuts. Given the events that happen over the course of the day, your job is to determine the number of donuts remaining when the shop closes. 输入格式 The first …...
1. 数据库基础
1.1 什么是数据库 ⭐ mysql 本质是一种网络服务, 是基于 C(mysql) S(mysqld)的 网络服务. 存储数据用文件就可以了，为什么还要弄个数据库？文件保存数据存在以下缺点： 文件的安全性问题。文件不利于数据查询和管理。文件不利于存储海量数据。…...
英伟达288GB HBM4+50P算力
英伟达CEO黄仁勋在COMPUTEX 2025上突然官宣：以暗物质研究先驱Vera Rubin命名的新一代AI芯片即将量产！这颗被称作“算力巨兽”的Rubin GPU，不仅搭载288GB HBM4显存和50 Petaflops推理算力，更携三大颠覆性技术直击AI行业痛点。更可怕…...
【Pandas】pandas DataFrame reset_index
Pandas2.2 DataFrame Reindexing selection label manipulation 方法描述DataFrame.add_prefix(prefix[, axis])用于在 DataFrame 的行标签或列标签前添加指定前缀的方法DataFrame.add_suffix(suffix[, axis])用于在 DataFrame 的行标签或列标签后添加指定后缀的方法DataFram…...
综合案例：斗地主
综合案例：斗地主 1.程序概述 这是一个模拟斗地主游戏发牌过程的C语言程序，实现了扑克牌的初始化、洗牌和发牌功能。 2.功能需求 2.1 扑克牌定义 使用结构体 Card 表示一张牌，包含： 花色属性suit（0-3表示普通花色♥…...
前端组件推荐 Swiper 轮播与 Lightbox 灯箱组件深度解析
在互联网产品不断迭代升级的今天，用户对于页面交互和视觉效果的要求越来越高。想要快速打造出吸睛又实用的项目，合适的组件必不可少。今天就为大家推荐两款超好用的组件 ——Swiper 轮播组件和 Lightbox 灯箱组件，轻松解决你的展示难题&#…...
解密并下载受DRM保护的MPD（DASH流媒体）加密视频
要解密并下载受DRM保护的MPD（DASH流媒体）加密视频，需结合技术工具与合法授权。以下是关键方法与步骤： 一、工具与技术要求 Widevine-DL 这是一个开源Python工具，支持下载和解密Widevine DRM保护的MPD内容。它依赖ffmpe…...
数据可视化有哪些步骤？2025高效落地指南
分享大纲 1、科学框架：从数据到洞察落地 2、可视化实战：捷码快速搭建专业大屏 3、关键避坑指南 根据IBM研究，规范的数据可视化流程，可以使得数据可视化搭建效率提升41%。那有标准的数据可视化搭建方法是哪些呢？本文将借…...
Deepfashion2 数据集使用笔记
目录 数据类别： 筛选类别数据： 验证精度筛选前2个类别： 提取类别数据 可视化类别数据： Deepfashion2 的解压码 旋转数据增强 数据类别： 类别含义： Class idx类别名称英文名称0短上衣short sleeve top1长上衣long sleeve top2短外套short sleeve outwear3长外套lo…...