目录
- 🎄 硬核浪漫：用 HTML5 Canvas 打造炫酷圣诞粒子特效网页
- ✨ 效果预览
- 🛠️ 技术核心原理
- 💻 代码实现详解
- 1. 搭建 HTML 骨架
- 2. 核心魔法：从图形提取粒子坐标
- 3. 粒子运动物理引擎
- 4. 绘制圣诞元素
- 🚀 如何运行
- 📝 总结
专栏导读
🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手
🏳️🌈 个人博客主页：请点击——> 个人的博客主页 求收藏
🏳️🌈 Github主页：请点击——> Github主页 求Star⭐
🏳️🌈 知乎主页：请点击——> 知乎主页 求关注
🏳️🌈 CSDN博客主页：请点击——> CSDN的博客主页 求关注
👍 该系列文章专栏：请点击——>Python办公自动化专栏 求订阅
🕷 此外还有爬虫专栏：请点击——>Python爬虫基础专栏 求订阅
📕 此外还有python基础专栏：请点击——>Python基础学习专栏 求订阅
文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
❤️ 欢迎各位佬关注！ ❤️
🎄 硬核浪漫：用 HTML5 Canvas 打造炫酷圣诞粒子特效网页
圣诞节到了，作为一个程序员，送什么样的礼物最硬核又浪漫？当然是手写代码！
今天我们将用原生 JavaScript + HTML5 Canvas，从零开始打造一个虚幻粒子特效网页。它不仅有静谧的飘雪背景，屏幕中央的粒子还会像魔法一样，自动变形成圣诞树、礼物盒、圣诞袜等形状，并且支持鼠标交互和点击切换。
Gitcode源代码
Gitcode源代码
✨ 效果预览
- 沉浸式背景：纯黑底色 + 柔和的飘雪动画。
- 粒子变形：成千上万个发光粒子，平滑地从一个形状飞向另一个形状（Morphing Effect）。
- 鼠标交互：鼠标滑过时，粒子会被“斥力”推开，仿佛你有原力一样。
- 点击切换：点击屏幕任意位置，立即切换下一个圣诞图案。
🛠️ 技术核心原理
这个特效主要包含两个核心系统：
- SnowSystem (背景雪花)：
- 简单的物理下落运动。
- 利用
y > height边界检查实现循环播放。
- MorphSystem (变形粒子)：
- 离屏渲染 (Off-screen Rendering)：在内存中创建一个看不见的 Canvas，先把图形（如圣诞树）画上去。
- 像素采样 (Pixel Sampling)：读取该 Canvas 的像素数据 (
getImageData)，找到所有有颜色的坐标点，作为粒子的“目标位置”。 - 物理缓动 (Easing)：让粒子根据当前位置和目标位置计算速度，实现平滑飞行的效果。
💻 代码实现详解
1. 搭建 HTML 骨架
我们需要两个 Canvas：一个在底层画雪花，一个在上层画主体粒子。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>圣诞快乐 - 虚幻粒子特效</title><style>body{margin:0;background:#000;overflow:hidden;}canvas{position:absolute;display:block;}#snowCanvas{z-index:1;pointer-events:none;}/* 雪花不挡交互 */#mainCanvas{z-index:2;}</style></head><body><canvasid="snowCanvas"></canvas><canvasid="mainCanvas"></canvas><scriptsrc="script.js"></script></body></html>2. 核心魔法：从图形提取粒子坐标
这是整个项目最精彩的部分。我们如何让粒子知道要排成“圣诞树”的样子？
// 在内存中创建一个虚拟 Canvasthis.virtualCanvas=document.createElement('canvas');this.vCtx=this.virtualCanvas.getContext('2d');// ... (省略：调用 drawTree 等函数在虚拟 Canvas 上画图) ...// 获取像素点数据getPointsFromShape(renderFn){// 1. 清空并绘制新形状this.vCtx.clearRect(0,0,this.width,this.height);renderFn(this.vCtx,this.width,this.height);// 2. 获取像素数据constimageData=this.vCtx.getImageData(0,0,this.width,this.height);constdata=imageData.data;constpoints=[];// 3. 遍历像素，采样// particleGap 控制采样密度，值越小粒子越密for(lety=0;y<this.height;y+=this.particleGap){for(letx=0;x<this.width;x+=this.particleGap){// 获取 Alpha 通道 (透明度)constindex=(y*this.width+x)*4;constalpha=data[index+3];// 如果这个像素有颜色 (不透明)if(alpha>128){constr=data[index];constg=data[index+1];constb=data[index+2];points.push({x:x,y:y,color:`rgb(${r},${g},${b})`});}}}returnpoints;}3. 粒子运动物理引擎
每个粒子都有当前的(x, y)和目标的(target.x, target.y)。我们在每一帧动画中，让粒子向目标移动一点点。
update(){// 开启发光模式！this.ctx.globalCompositeOperation='lighter';for(leti=0;i<this.particles.length;i++){constp=this.particles[i];consttarget=this.targetPoints[i];// 对应的目标点// 1. 计算鼠标斥力// (代码省略：计算鼠标与粒子的距离，如果过近则产生反向推力)// 2. 缓动飞向目标// 公式：速度 += (目标 - 当前) * 弹性系数p.vx+=(target.x-p.x)*0.05;p.vy+=(target.y-p.y)*0.05;// 3. 摩擦力 (防止粒子永远停不下来)p.vx*=0.85;p.vy*=0.85;// 4. 更新位置p.x+=p.vx;p.y+=p.vy;// 5. 绘制this.ctx.fillStyle=p.color;this.ctx.fillRect(p.x,p.y,2,2);}}4. 绘制圣诞元素
我们使用 Canvas 2D API 手绘出各种形状。比如画一个简单的圣诞树：
drawTree(ctx,w,h){constcx=w/2;constcy=h/2+100;ctx.fillStyle='#2ecc71';// 绿色// 画三个三角形叠在一起// ...// 画树干ctx.fillStyle='#8e44ad';ctx.fillRect(cx-30,cy,60,80);}🚀 如何运行
- 创建一个文件夹，新建
index.html。 - 将上面的 HTML 代码和完整的 JS 代码（见源码）放入对应文件。
- 双击
index.html打开，或者使用 VS Code 的 Live Server 插件运行。 - Enjoy your Christmas! 🎅
📝 总结
通过这个项目，我们复习了：
- Canvas 像素操作：这是做粒子文字、图片粒子化的基础。
- 物理动画基础：速度、加速度、摩擦力的简单应用。
- 交互设计：如何让静态的画面动起来，响应用户的操作。
代码虽短，心意满满。祝大家Merry Christmas & Happy Coding!❄️🎁
Created by Trae AI Assistant
结尾
希望对初学者有帮助；致力于办公自动化的小小程序员一枚
希望能得到大家的【❤️一个免费关注❤️】感谢！
求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍
此外还有办公自动化专栏，欢迎大家订阅：Python办公自动化专栏
此外还有爬虫专栏，欢迎大家订阅：Python爬虫基础专栏
此外还有Python基础专栏，欢迎大家订阅：Python基础学习专栏
