简介这是一个基于HTML5 Canvas的粒子流动爱心形状动画特效源码包面向前端开发初学者与Canvas动画爱好者展示如何用原生Canvas API构建动态粒子系统并让红色粒子沿预设爱心路径流动、逐渐消散形成浪漫而引人注目的视觉体验。压缩包共4个文件包含2个JavaScript脚本分别负责粒子类定义、状态更新与绘图逻辑覆盖初始化函数、requestAnimationFrame动画循环、1个CSS样式文件用于设置画布全屏显示、背景颜色等以及1个HTML入口页面承载画布并引入脚本整体仅6KB结构紧凑且易于阅读页面、脚本与样式分离便于定位修改。目前已有6347人学习下载足见其对前端动画开发者的吸引力。通过学习该案例可以掌握Canvas路径绘制beginPath、moveTo、lineTo、fillStyle颜色填充、粒子系统的设计思路位置、速度、透明度随时间变化以及性能友好的动画循环写法代码模块划分清晰适合直接运行、调整粒子数量、颜色或速度等参数也可作为二次开发模板迁移到表白页面、周年纪念等创意场景中。1. 用 Canvas 粒子拼一个会流动的爱心一个 HTML 文件就能跑把粒子动画做成爱心形状听起来像是需要 three.js、WebGL 或者一堆第三方库才能搞定的事实际上纯 HTML5 Canvas 就够了。这份资源的核心是一个自包含的 HTML 文件打开浏览器就能看到几百上千个粒子从屏幕各处出现带着随机速度流动然后像被磁铁吸引一样汇聚成一个清晰的爱心轮廓。你可以直接把它嵌入活动页、个人主页或者当成网页设计作业的加分页。适合的人群很具体前端入门到进阶、想给静态页面加动态背景的人、以及做 H5 活动页但不想引入重型动画库的开发者。它不需要构建工具、不需要 npm install浏览器自带的 Canvas 2D API 全部搞定。这类特效的通用套路是「粒子系统 目标位置驱动」每个粒子有自己的位置、速度和寿命每帧先按物理规则更新位置再朝目标点做插值目标点就是爱心形状的采样坐标。理解了这一层你就能随意把爱心换成文字、五角星、甚至一张图的轮廓。下面从代码结构开始拆。2. 拆粒子系统位置、速度、寿命三件套2.1 粒子的数据结构与初始化先看粒子对象怎么定义。这份资源里的做法很直接每个粒子就是一个普通 JS 对象包含四个核心字段function createParticle(index, total) { return { x: Math.random() * canvas.width, // 初始 x全屏随机 y: Math.random() * canvas.height, // 初始 y全屏随机 vx: (Math.random() - 0.5) * 4, // x 方向速度范围 [-2, 2] vy: (Math.random() - 0.5) * 4, // y 方向速度范围 [-2, 2] targetX: 0, // 目标 x稍后由爱心坐标填充 targetY: 0, // 目标 y life: Math.random() * 100 50 // 寿命决定粒子存活多久 }; }初始化时让粒子随机散布在整个画布上而不是一开始就在爱心位置这样动画首帧就有「从无序到有序」的视觉冲击。速度范围控制在 ±2 以内太小会显得粒子爬不动太大会让汇聚过程像一团乱麻。寿命字段的作用是让粒子在流动过程中自然消亡并重生避免画面死板——后面会详细讲。2.2 每帧更新物理运动与目标吸引的结合粒子不能直接瞬移到目标点那样就看不到“流动”的过程了。常见做法是把自由运动和目标吸引叠加起来写function updateParticle(p) { // 先按自由速度移动 p.x p.vx; p.y p.vy; // 计算与目标点之间的差值向目标方向靠近 const dx p.targetX - p.x; const dy p.targetY - p.y; p.vx dx * 0.002; // 加速度系数控制吸引强度 p.vy dy * 0.002; // 加一点阻尼防止粒子在目标点附近来回震荡 p.vx * 0.96; p.vy * 0.96; // 寿命递减归零后重置粒子 p.life - 1; if (p.life 0) { resetParticle(p); } }这里的 0.002 是加速度系数0.96 是阻尼系数两个数值直接决定动画手感。系数调大会让粒子“撞”向目标后弹开调小则汇聚过程很缓慢画面看起来松散。如果你想让爱心先快速成型再缓慢微调可以动态改这两个值比如前 120 帧用 0.004 的加速度之后降到 0.001。2.3 生命周期管理粒子不是永生体如果所有粒子永远不消失长时间运行后粒子会全部堆在爱心轮廓上画面变成静态图。所以要给粒子设寿命让它到点重置回随机位置function resetParticle(p) { p.x Math.random() * canvas.width; p.y Math.random() * canvas.height; p.vx (Math.random() - 0.5) * 4; p.vy (Math.random() - 0.5) * 4; p.life Math.random() * 100 50; }重置之后粒子的目标点不用变这样它会在「随机飘动 → 被吸引力拉回爱心」之间循环形成持续流动的视觉效果。如果希望粒子永远不散开把 life 改成 Infinity 就行但那样动画会逐渐失去动态感。折中方案是把 life 范围从 50-150 拉到 200-400粒子存活时间更长爱心轮廓更稳定同时还能保持缓慢的新陈代谢。3. 爱心坐标从哪来两种生成方式与归一化处理3.1 方式一数学公式直接采样爱心形状可以用参数方程描述最常见的写法是function getHeartPoint(t) { const scale 12; const x 16 * Math.pow(Math.sin(t), 3); const y 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return { x: x * scale, y: -y * scale // 取负号是因为 Canvas 坐标系 y 轴向下 }; }t 的取值范围是 0 到 2π每取一个 t 值就得到爱心轮廓上的一个点。注意 Canvas 的坐标系原点是左上角y 轴向下为正而标准数学坐标系 y 轴向上为正所以这里给 y 取了负号否则爱心会上下颠倒。生成所有粒子的目标点时用循环遍历const points []; const particleCount 800; for (let i 0; i particleCount; i) { const t (i / particleCount) * Math.PI * 2; points.push(getHeartPoint(t)); }这种方式得到的点在爱心轮廓上均匀分布因为 t 是线性递增的。不过实际效果中爱心右下角区域线条更密集这是因为参数方程在不同 t 值下扫过的弧长不均匀不是 bug而是数学特性。3.2 方式二预定义坐标数组不想用数学公式的另一个做法是把爱心轮廓手动定义成一组坐标点比如从设计软件里导出的路径点或者自己写的简化轮廓const heartShape [ [0, -2], [1, -1.8], [2, -1.2], [2.5, 0], [2, 1.2], [1, 2], [0, 1.5], [-1, 2], [-2, 1.2], [-2.5, 0], [-2, -1.2], [-1, -1.8] ];这种方式的优势是形状完全可控你愿意的话直接画一个五角星的坐标数组也能跑。缺点是手工点的数量有限粒子数多的话同一个坐标会被多个粒子共享汇聚后轮廓有“重影”。解决方法是粒子数量超过坐标点数量时用相邻两点线性插值生成中间点。3.3 归一化与画布居中无论是公式生成还是数组生成坐标值都很小爱心原始宽度约 30 个单位直接当像素用会缩在角落。需要先算包围盒再缩放到画布尺寸// 假设 points 是原始坐标数组 let minX Infinity, maxX -Infinity, minY Infinity, maxY -Infinity; points.forEach(p { minX Math.min(minX, p.x); maxX Math.max(maxX, p.x); minY Math.min(minY, p.y); maxY Math.max(maxY, p.y); }); const scale Math.min( canvas.width * 0.6 / (maxX - minX), canvas.height * 0.6 / (maxY - minY) ); const offsetX canvas.width / 2 - (minX maxX) / 2 * scale; const offsetY canvas.height / 2 - (minY maxY) / 2 * scale; points.forEach(p { p.x p.x * scale offsetX; p.y p.y * scale offsetY; });scale 取 0.6 是给爱心留出四周的呼吸空间粒子流动时不容易溢出边界。这段代码用了一个小技巧先求包围盒中心再通过平移把爱心中心挪到画布正中央。这一步非常重要直接决定爱心是居中还是偏到画布角落比例因子 0.6 可以根据实际场景改成 0.4爱心更小或 0.8爱心更大。4. 动画主循环与绘制顺序先清屏还是先画粒子4.1 requestAnimationFrame 驱动的标准主循环动画的骨架是 requestAnimationFrame 递归调用这是浏览器原生的动画调度器帧率自动匹配屏幕刷新率let animationId null; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制半透明背景形成渐变拖尾效果 ctx.fillStyle rgba(0, 0, 0, 0.1); ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(p { updateParticle(p); drawParticle(p); }); animationId requestAnimationFrame(animate); } // 启动 animate();关键点在 clearRect 和半透明背景的配合。如果只 clearRect 不填充背景粒子运动轨迹是干净的但缺少“流动”的拖尾感如果填充全不透明背景上一帧的粒子痕迹被完全擦掉也看不到流动轨迹。rgba(0, 0, 0, 0.1)的意思是每帧只擦除 10% 的旧画面粒子轨迹会在画布上残留约 10 帧形成自然的拖尾效果。4.2 绘制粒子时的样式取舍粒子的颜色和大小的选择对观感影响很大function drawParticle(p) { ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fillStyle hsla(340, 80%, 65%, ${p.life / 200}); // 颜色随寿命渐淡 ctx.fill(); }用 HSLA 颜色而不是直接的红色好处是可以快速调出粉红、玫红、橘红等不同氛围。透明度绑定 life 值粒子快消失时颜色变淡新旧粒子交替更自然。粒子半径 2 是像素值粒子数量多时 2 像素会显得画面密集粒子少时 2 像素又显得稀疏建议与粒子数量联动调整比如粒子密度 粒子数 / 画布面积密度超过 0.01 就缩小半径到 1.5。4.3 性能配置表不同设备的参数参照场景粒子数量粒子半径阻尼系数加速度系数备注低端手机3001.50.980.001减少粒子数换取 60fps中端手机50020.960.002平衡效果与性能桌面 Chrome80020.960.002推荐配置高配置 PC12002.50.950.003粒子更多汇聚更迅速提示粒子数量不是越高越好超过 1500 后 Canvas 绘制大量 arc 会明显掉帧尤其是低分辨率移动设备。设置一个质量开关是常见做法const isMobile window.innerWidth 768移动端强制用 300 粒子。5. 避坑指南流动效果不丝滑的五个常见原因5.1 粒子全挤在画布左上角现象粒子不从全屏出现全部聚集在左上角一小块区域。原因常见于修改了爱心坐标生成逻辑但没有做归一化直接把小范围的坐标值当成像素使用。爱心公式生成的原始坐标在 ±20 这个量级画布宽度通常 800所以所有点都落在左上角。解决确认在填充 targetX 和 targetY 之前执行了 3.3 节的归一化代码并且 scale 和 offsetX/offsetY 是基于当前画布尺寸动态计算的。5.2 爱心形状不完整缺一块或变形现象粒子汇聚后轮廓能看出来是爱心但左半边明显比右半边密集或者底部有缺口。原因参数方程采样 t 值步长固定但参数方程在曲率大的地方实际走的路径短、点密集曲率小的地方点稀疏。另一个常见原因是 t 的范围没写对用了 0 到 π 而不是 0 到 2π。解决检查 t 的遍历是否覆盖完整周期如果覆盖了还是不均匀增加采样点数量到粒子数的 2 倍再随机挑选。还有一种改进做法是用等弧长采样算法对每个相邻采样点累加欧几里得距离把轮廓总长均分不过对爱心这种形状来说肉眼差距不大性价比不高。5.3 粒子跑到画布外面去了现象动画运行一段时间后画布边缘出现大量粒子爱心反而没那么明显。原因粒子自由运动阶段受 vx 和 vy 影响长期运行的粒子可能飞到边界外。Canvas 对越界绘制不会报错但会消耗额外渲染性能且视觉上不美观。解决在 resetParticle 里加边界判断或者让粒子到边界后反弹if (p.x 0 || p.x canvas.width) p.vx * -1; if (p.y 0 || p.y canvas.height) p.vy * -1;这段逻辑放在 updateParticle 末尾即可注意先判断再更新位置避免粒子在边界处来回抖动。5.4 拖尾效果变成整个画面模糊现象爱心周围的旧轨迹不消失画面逐渐变成一团渐变色的雾。原因rgba(0, 0, 0, 0.1)每帧只擦除 10% 旧画面配合 60fps 渲染时同一个像素点被反复覆盖如果粒子的透明度不够低累积速度会超过擦除速度。解决把 rgba 的 alpha 值从 0.1 提高到 0.2或者把粒子的透明度上限从 1 降到 0.7。注意这是双因子改一个不够要同时调整才能达到旧的擦掉、新的画上去的动态平衡。5.5 移动端卡顿严重现象iPhone 上打开页面粒子速度明显变慢发热明显帧率目测不到 30fps。原因粒子数量用固定值 800在屏幕较小的移动端仍然跑全部粒子Canvas 绘制压力大。另外没有监听 resize 事件手机横竖屏切换后画布尺寸变化粒子坐标全部偏移。解决初始化前检测 UA 或屏幕宽度移动端粒子数降为 300监听window.addEventListener(resize, resetCanvas)并重新计算画布尺寸、粒子目标和归一化参数。资源里没有做这一步的话建议在嵌到自己页面时补上这属于白送的优化点。6. 进阶玩法让粒子跟随鼠标重新汇聚爱心可散可聚基础的爱心流动特效做出来后一个收益极高的升级是加入鼠标交互。实现思路并不复杂监听 canvas 上的 mousemove 事件把鼠标坐标当做一个临时的目标点所有粒子从爱心目标切换到鼠标位置形成“爱心散开、朝鼠标聚拢”的视觉效果。鼠标移开后粒子再回落到爱心坐标。let followMouse false; let mouseX 0, mouseY 0; canvas.addEventListener(mousemove, e { const rect canvas.getBoundingClientRect(); mouseX e.clientX - rect.left; mouseY e.clientY - rect.top; followMouse true; }); canvas.addEventListener(mouseleave, () { followMouse false; }); // 在动画主循环里切换目标 particles.forEach((p, index) { const target followMouse ? { x: mouseX (index % 100) * 0.1, y: mouseY (index % 100) * 0.1 } : heartTargets[index]; p.targetX target.x; p.targetY target.y; });mouseX 加一个微小偏移量(index % 100) * 0.1的目的是让粒子聚拢时不是完全重叠在一个点上而是形成一个模糊的光团质感更好。如果希望爱心散开时有个“爆炸”效果可以在切换目标的同时重置所有粒子的速度方向让 vx/vy 随机取一个较大值粒子会先炸开再飞向鼠标。我拆过多个这类 Canvas 特效资源最容易翻车的地方反而不是代码本身而是把代码嵌进现有项目时的全局污染。粒子脚本里用了大量裸变量没有包在 IIFE 或模块作用域里直接引入会导致 window 上挂满 x、y、vx 之类的全局变量和页面其他脚本冲突。从那以后我每次接入这类资源都会强制先做两件事第一步把全部代码包进(() { ... })()第二步让粒子数量、颜色、速度都暴露成一个可配置对象放在全局。这套流程走完之后就再没因为接入特效导致页面白屏过。希望这篇拆解帮你在接入这份资源时少走一段弯路。本文还有配套的精品资源点击获取
