简介这份资源是一段基于HTML5 Canvas的悬挂弹性文字特效代码面向具备基础HTML与JavaScript语法、希望提升动态网页交互开发能力的前端学习者。它解决的是如何用Canvas实现文字随鼠标拖动并产生弹性回弹效果的问题适合作为动画原理与交互设计的练手案例。压缩包为rar格式共4个文件包含1个html主页面、1个txt使用说明以及2个url链接文件整体仅3KB轻量易读。代码核心围绕canvas.getContext(2d)获取2D上下文通过fillText绘制文字结合onmousemove监听鼠标位置并借助requestAnimationFrame驱动动画帧模拟弹性势能与动能转换的物理效果。读者可从中掌握文字绘制、坐标变换、鼠标交互与动画循环的完整实现思路理解如何让文字在松开鼠标后自然弹跳从而加深对Canvas API与动态渲染机制的认识。目前已有214人学习下载。1. 悬挂弹性文字从一根“会抖的绳子”说起页面顶部挂一排字鼠标划过时文字像被拨动的琴弦一样上下弹几下松手后慢慢回稳——这个效果在活动页、品牌官网和游戏加载页里出镜率极高。它背后的核心不是 CSS 动画而是 HTML5 Canvas 逐帧重绘加一套简化的弹簧物理模型。很多人第一次写会直接上 CSStransition或animation结果发现文字只能整体位移做不出“每个字独立悬挂、互相牵连”的手感。Canvas 方案的价值就在这里你能精确控制每个字符的位移、速度、加速度还能让相邻字符之间产生力的传递。这篇内容面向想把这个特效真正落地到项目里的前端从物理模型、坐标计算、渲染循环一路写到参数调优和翻车排查代码可以直接抄进你的页面跑起来。2. 悬挂弹性的物理模型弹簧阻尼到底怎么算2.1 为什么不用 CSS 动画而用 Canvas 逐帧计算CSS 动画的插值曲线是预设的cubic-bezier能模拟一次回弹但没法让“第 3 个字被第 2 个字带动”这种链式反应自然发生。悬挂弹性文字的本质是每个字符是一个质点字符与字符之间、字符与悬挂点之间存在弹簧约束。用 Canvas 的requestAnimationFrame每帧算一次位置才能把这种耦合关系表达出来。常见做法是给每个字符维护三个量当前位置y、当前速度v、目标位置targetY。每帧执行// 简谐运动 阻尼 const spring 0.08; // 弹性系数越大回弹越快 const damping 0.82; // 阻尼系数越小停得越快 v (targetY - y) * spring; v * damping; y v;这段就是整个特效的心脏。spring决定“弹得多猛”damping决定“晃几下停”。两个参数配合不好要么像果冻一样停不下来要么像被冻住一样毫无弹性。2.2 悬挂点的锚定与字符间距的力传递如果只做单字弹跳上面那段就够了。但“悬挂”意味着字符是挂在一条线上的相邻字符会互相拉扯。我一般会加一层邻居耦合// 邻居影响当前字符受到左右字符位移的牵引 const neighborForce 0.03; v (leftY - y) * neighborForce; v (rightY - y) * neighborForce;neighborForce通常取spring的 1/3 到 1/2。太大整排字会一起晃失去层次太小就退化成各弹各的。实际调的时候先把neighborForce设为 0确认单字弹性对了再逐步加上去。2.3 用 Canvas 绘制文字时的坐标基准Canvas 的fillText默认以文字基线为基准而悬挂效果需要以字符顶部或中心为锚点。稳妥做法是先用measureText拿到宽度再结合textBaseline设置ctx.textBaseline middle; ctx.textAlign center; // 每个字符的绘制坐标 ctx.fillText(char, x, baseY offsetY);baseY是静止时的基准线offsetY就是上面算出来的y - targetY。注意textBaseline一旦设成middlemeasureText的高度参考会变做垂直居中时要统一用actualBoundingBoxAscent/Descent来校准否则不同字体下会偏。3. 从零跑通一个最小可用的悬挂弹性文字3.1 初始化 Canvas 与字符对象数组先把每个字符拆成独立对象存好初始坐标和物理状态const canvas document.getElementById(stage); const ctx canvas.getContext(2d); const text 悬挂弹性; const fontSize 64; const chars []; // 设置高 DPI 避免模糊 const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; ctx.scale(dpr, dpr); ctx.font ${fontSize}px sans-serif; ctx.textAlign center; ctx.textBaseline middle; let cursorX 80; for (const ch of text) { const w ctx.measureText(ch).width; chars.push({ ch, x: cursorX w / 2, baseY: 120, y: 120, v: 0, targetY: 120 }); cursorX w 12; // 12 为字间距 }这里baseY和targetY初始相同表示静止状态。cursorX累加时把字宽和间距都算进去保证每个字符的x是它自己的中心点。3.2 每帧更新物理状态并重绘渲染循环里先清屏再遍历字符更新v和y最后绘制function tick() { ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); for (let i 0; i chars.length; i) { const c chars[i]; const left chars[i - 1]; const right chars[i 1]; // 自身弹簧力 c.v (c.targetY - c.y) * 0.08; // 邻居耦合 if (left) c.v (left.y - c.y) * 0.03; if (right) c.v (right.y - c.y) * 0.03; // 阻尼 c.v * 0.82; c.y c.v; ctx.fillText(c.ch, c.x, c.y); } requestAnimationFrame(tick); } tick();跑起来后文字是静止的因为还没有触发条件。下一步加交互。3.3 鼠标悬停触发位移的三种方式最直接的是监听mousemove判断鼠标是否落在某个字符的包围盒内命中就把该字符的targetY往下压canvas.addEventListener(mousemove, (e) { const rect canvas.getBoundingClientRect(); const mx e.clientX - rect.left; const my e.clientY - rect.top; for (const c of chars) { const halfW ctx.measureText(c.ch).width / 2; if (mx c.x - halfW mx c.x halfW my c.y - 40 my c.y 40) { c.targetY c.baseY 30; // 下压 30px } else { c.targetY c.baseY; // 回弹到原位 } } });targetY一变弹簧力就会把y拉过去松手后自动回弹。另外两种触发方式是用mouseenter只触发一次脉冲给v一个初速度或者用定时器做波浪式循环触发。前者适合“点一下弹一下”后者适合做自动演示。4. 参数调优与视觉手感让弹性“像真的”4.1 spring、damping、neighborForce 的取值区间这三个参数没有绝对标准但经过多轮调试下面这组区间比较稳参数推荐范围作用调过头会怎样spring0.05 ~ 0.12回弹速度大于 0.15 会高频抖动damping0.75 ~ 0.88能量损耗大于 0.92 几乎不停neighborForce0.02 ~ 0.05字符间牵连大于 0.08 整排同步晃下压位移20 ~ 50px触发幅度太大文字会飞出画布调参顺序建议先固定neighborForce0调spring和damping到单字手感满意再加neighborForce观察相邻字符是否自然跟随最后调下压位移让触发范围跟鼠标移动匹配。4.2 不同字体和字号下的基线偏移修正换字体后最容易翻车的是垂直位置。textBaselinemiddle在不同字体下的实际视觉中心并不一致。稳妥做法是用actualBoundingBoxAscent和actualBoundingBoxDescent算真实中心const m ctx.measureText(ch); const visualCenter (m.actualBoundingBoxAscent - m.actualBoundingBoxDescent) / 2; // 绘制时用 baseY visualCenter 作为 middle 基准如果浏览器不支持这两个属性老版本退而求其次用fontSize * 0.35作为经验偏移量。这个坑我在换用思源黑体时踩过不修正的话整排字会偏上约 6px。4.3 高 DPI 屏幕下的模糊问题与 devicePixelRatioCanvas 默认按 CSS 像素绘制在 Retina 屏上会模糊。标准解法就是 3.1 里那段把canvas.width设为clientWidth * dpr再用ctx.scale(dpr, dpr)把坐标系缩回来。注意clearRect要用缩放后的逻辑尺寸否则会清不干净。另外dpr在浏览器缩放时会变监听resize重新初始化是必要的。5. 避坑与排查悬挂弹性文字最常见的 5 个翻车点5.1 文字整体偏移或错位现象所有字符挤在一起或间距忽大忽小。原因measureText在设置font之前调用拿到的是默认字体的宽度。解决先设ctx.font再measureText并且每次改字号后重新测量。5.2 弹性停不下来或直接僵死现象文字一直抖或者鼠标移开后纹丝不动。原因damping和spring比例失衡。解决记住一个经验比例——damping ≈ 1 - spring * 2。比如spring0.08damping取0.84左右。偏离太多就会出问题。5.3 鼠标快速划过时字符“炸开”现象快速移动鼠标文字乱飞甚至飞出画布。原因targetY频繁切换速度累积过大。解决给v加一个上限比如v Math.max(-30, Math.min(30, v))同时把mousemove做节流每 16ms 最多处理一次。5.4 移动端触摸无反应现象手机上点按没效果。原因只监听了mousemove。解决补上touchmove和touchstart用e.touches[0].clientX/Y取坐标并e.preventDefault()防止页面滚动干扰。5.5 多个 Canvas 实例互相抢帧现象页面里放了两个特效其中一个卡顿。原因每个实例都跑独立的requestAnimationFrame。解决合并到一个循环里统一更新所有实例或者用IntersectionObserver让不可见的 Canvas 暂停渲染。6. 进阶把悬挂弹性文字做成可复用的渲染器6.1 用类封装字符状态与更新逻辑把前面散落的逻辑收进一个类方便在多个页面复用class ElasticText { constructor(canvas, text, options {}) { this.ctx canvas.getContext(2d); this.text text; this.spring options.spring ?? 0.08; this.damping options.damping ?? 0.82; this.neighbor options.neighbor ?? 0.03; this.chars []; this._init(canvas, options); } _init(canvas, options) { const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; this.ctx.scale(dpr, dpr); this.ctx.font ${options.fontSize || 64}px sans-serif; this.ctx.textAlign center; this.ctx.textBaseline middle; // ... 字符拆分逻辑 } update() { // ... 物理更新 } render() { // ... 绘制 } }封装后换文字、换字号、换弹性参数都只改构造参数不用动内部逻辑。6.2 用 requestAnimationFrame 做统一调度多个实例共用一个循环const instances []; function loop() { for (const inst of instances) { inst.update(); inst.render(); } requestAnimationFrame(loop); } loop();这样帧率稳定也方便在页面隐藏时用document.hidden暂停。6.3 验证弹性是否“物理正确”的一个小技巧打开控制台给某个字符的v打日志观察它从触发到静止的曲线。正确的阻尼振荡应该是振幅逐次衰减、周期基本一致。如果振幅忽大忽小说明neighborForce引入了额外能量需要调低。这个习惯帮我省了很多“看起来怪但说不出哪怪”的调试时间。最后说一句实在的这个特效代码量不大但参数手感占七成。我一般会先把spring和damping调到自己看着舒服再考虑邻居耦合和交互触发。别一上来就堆功能先把单字弹对后面都是顺的。希望帮到你。本文还有配套的精品资源点击获取
HTML5 Canvas 悬挂弹性文字：弹簧阻尼物理模型与逐帧渲染实战
简介这份资源是一段基于HTML5 Canvas的悬挂弹性文字特效代码面向具备基础HTML与JavaScript语法、希望提升动态网页交互开发能力的前端学习者。它解决的是如何用Canvas实现文字随鼠标拖动并产生弹性回弹效果的问题适合作为动画原理与交互设计的练手案例。压缩包为rar格式共4个文件包含1个html主页面、1个txt使用说明以及2个url链接文件整体仅3KB轻量易读。代码核心围绕canvas.getContext(2d)获取2D上下文通过fillText绘制文字结合onmousemove监听鼠标位置并借助requestAnimationFrame驱动动画帧模拟弹性势能与动能转换的物理效果。读者可从中掌握文字绘制、坐标变换、鼠标交互与动画循环的完整实现思路理解如何让文字在松开鼠标后自然弹跳从而加深对Canvas API与动态渲染机制的认识。目前已有214人学习下载。1. 悬挂弹性文字从一根“会抖的绳子”说起页面顶部挂一排字鼠标划过时文字像被拨动的琴弦一样上下弹几下松手后慢慢回稳——这个效果在活动页、品牌官网和游戏加载页里出镜率极高。它背后的核心不是 CSS 动画而是 HTML5 Canvas 逐帧重绘加一套简化的弹簧物理模型。很多人第一次写会直接上 CSStransition或animation结果发现文字只能整体位移做不出“每个字独立悬挂、互相牵连”的手感。Canvas 方案的价值就在这里你能精确控制每个字符的位移、速度、加速度还能让相邻字符之间产生力的传递。这篇内容面向想把这个特效真正落地到项目里的前端从物理模型、坐标计算、渲染循环一路写到参数调优和翻车排查代码可以直接抄进你的页面跑起来。2. 悬挂弹性的物理模型弹簧阻尼到底怎么算2.1 为什么不用 CSS 动画而用 Canvas 逐帧计算CSS 动画的插值曲线是预设的cubic-bezier能模拟一次回弹但没法让“第 3 个字被第 2 个字带动”这种链式反应自然发生。悬挂弹性文字的本质是每个字符是一个质点字符与字符之间、字符与悬挂点之间存在弹簧约束。用 Canvas 的requestAnimationFrame每帧算一次位置才能把这种耦合关系表达出来。常见做法是给每个字符维护三个量当前位置y、当前速度v、目标位置targetY。每帧执行// 简谐运动 阻尼 const spring 0.08; // 弹性系数越大回弹越快 const damping 0.82; // 阻尼系数越小停得越快 v (targetY - y) * spring; v * damping; y v;这段就是整个特效的心脏。spring决定“弹得多猛”damping决定“晃几下停”。两个参数配合不好要么像果冻一样停不下来要么像被冻住一样毫无弹性。2.2 悬挂点的锚定与字符间距的力传递如果只做单字弹跳上面那段就够了。但“悬挂”意味着字符是挂在一条线上的相邻字符会互相拉扯。我一般会加一层邻居耦合// 邻居影响当前字符受到左右字符位移的牵引 const neighborForce 0.03; v (leftY - y) * neighborForce; v (rightY - y) * neighborForce;neighborForce通常取spring的 1/3 到 1/2。太大整排字会一起晃失去层次太小就退化成各弹各的。实际调的时候先把neighborForce设为 0确认单字弹性对了再逐步加上去。2.3 用 Canvas 绘制文字时的坐标基准Canvas 的fillText默认以文字基线为基准而悬挂效果需要以字符顶部或中心为锚点。稳妥做法是先用measureText拿到宽度再结合textBaseline设置ctx.textBaseline middle; ctx.textAlign center; // 每个字符的绘制坐标 ctx.fillText(char, x, baseY offsetY);baseY是静止时的基准线offsetY就是上面算出来的y - targetY。注意textBaseline一旦设成middlemeasureText的高度参考会变做垂直居中时要统一用actualBoundingBoxAscent/Descent来校准否则不同字体下会偏。3. 从零跑通一个最小可用的悬挂弹性文字3.1 初始化 Canvas 与字符对象数组先把每个字符拆成独立对象存好初始坐标和物理状态const canvas document.getElementById(stage); const ctx canvas.getContext(2d); const text 悬挂弹性; const fontSize 64; const chars []; // 设置高 DPI 避免模糊 const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; ctx.scale(dpr, dpr); ctx.font ${fontSize}px sans-serif; ctx.textAlign center; ctx.textBaseline middle; let cursorX 80; for (const ch of text) { const w ctx.measureText(ch).width; chars.push({ ch, x: cursorX w / 2, baseY: 120, y: 120, v: 0, targetY: 120 }); cursorX w 12; // 12 为字间距 }这里baseY和targetY初始相同表示静止状态。cursorX累加时把字宽和间距都算进去保证每个字符的x是它自己的中心点。3.2 每帧更新物理状态并重绘渲染循环里先清屏再遍历字符更新v和y最后绘制function tick() { ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); for (let i 0; i chars.length; i) { const c chars[i]; const left chars[i - 1]; const right chars[i 1]; // 自身弹簧力 c.v (c.targetY - c.y) * 0.08; // 邻居耦合 if (left) c.v (left.y - c.y) * 0.03; if (right) c.v (right.y - c.y) * 0.03; // 阻尼 c.v * 0.82; c.y c.v; ctx.fillText(c.ch, c.x, c.y); } requestAnimationFrame(tick); } tick();跑起来后文字是静止的因为还没有触发条件。下一步加交互。3.3 鼠标悬停触发位移的三种方式最直接的是监听mousemove判断鼠标是否落在某个字符的包围盒内命中就把该字符的targetY往下压canvas.addEventListener(mousemove, (e) { const rect canvas.getBoundingClientRect(); const mx e.clientX - rect.left; const my e.clientY - rect.top; for (const c of chars) { const halfW ctx.measureText(c.ch).width / 2; if (mx c.x - halfW mx c.x halfW my c.y - 40 my c.y 40) { c.targetY c.baseY 30; // 下压 30px } else { c.targetY c.baseY; // 回弹到原位 } } });targetY一变弹簧力就会把y拉过去松手后自动回弹。另外两种触发方式是用mouseenter只触发一次脉冲给v一个初速度或者用定时器做波浪式循环触发。前者适合“点一下弹一下”后者适合做自动演示。4. 参数调优与视觉手感让弹性“像真的”4.1 spring、damping、neighborForce 的取值区间这三个参数没有绝对标准但经过多轮调试下面这组区间比较稳参数推荐范围作用调过头会怎样spring0.05 ~ 0.12回弹速度大于 0.15 会高频抖动damping0.75 ~ 0.88能量损耗大于 0.92 几乎不停neighborForce0.02 ~ 0.05字符间牵连大于 0.08 整排同步晃下压位移20 ~ 50px触发幅度太大文字会飞出画布调参顺序建议先固定neighborForce0调spring和damping到单字手感满意再加neighborForce观察相邻字符是否自然跟随最后调下压位移让触发范围跟鼠标移动匹配。4.2 不同字体和字号下的基线偏移修正换字体后最容易翻车的是垂直位置。textBaselinemiddle在不同字体下的实际视觉中心并不一致。稳妥做法是用actualBoundingBoxAscent和actualBoundingBoxDescent算真实中心const m ctx.measureText(ch); const visualCenter (m.actualBoundingBoxAscent - m.actualBoundingBoxDescent) / 2; // 绘制时用 baseY visualCenter 作为 middle 基准如果浏览器不支持这两个属性老版本退而求其次用fontSize * 0.35作为经验偏移量。这个坑我在换用思源黑体时踩过不修正的话整排字会偏上约 6px。4.3 高 DPI 屏幕下的模糊问题与 devicePixelRatioCanvas 默认按 CSS 像素绘制在 Retina 屏上会模糊。标准解法就是 3.1 里那段把canvas.width设为clientWidth * dpr再用ctx.scale(dpr, dpr)把坐标系缩回来。注意clearRect要用缩放后的逻辑尺寸否则会清不干净。另外dpr在浏览器缩放时会变监听resize重新初始化是必要的。5. 避坑与排查悬挂弹性文字最常见的 5 个翻车点5.1 文字整体偏移或错位现象所有字符挤在一起或间距忽大忽小。原因measureText在设置font之前调用拿到的是默认字体的宽度。解决先设ctx.font再measureText并且每次改字号后重新测量。5.2 弹性停不下来或直接僵死现象文字一直抖或者鼠标移开后纹丝不动。原因damping和spring比例失衡。解决记住一个经验比例——damping ≈ 1 - spring * 2。比如spring0.08damping取0.84左右。偏离太多就会出问题。5.3 鼠标快速划过时字符“炸开”现象快速移动鼠标文字乱飞甚至飞出画布。原因targetY频繁切换速度累积过大。解决给v加一个上限比如v Math.max(-30, Math.min(30, v))同时把mousemove做节流每 16ms 最多处理一次。5.4 移动端触摸无反应现象手机上点按没效果。原因只监听了mousemove。解决补上touchmove和touchstart用e.touches[0].clientX/Y取坐标并e.preventDefault()防止页面滚动干扰。5.5 多个 Canvas 实例互相抢帧现象页面里放了两个特效其中一个卡顿。原因每个实例都跑独立的requestAnimationFrame。解决合并到一个循环里统一更新所有实例或者用IntersectionObserver让不可见的 Canvas 暂停渲染。6. 进阶把悬挂弹性文字做成可复用的渲染器6.1 用类封装字符状态与更新逻辑把前面散落的逻辑收进一个类方便在多个页面复用class ElasticText { constructor(canvas, text, options {}) { this.ctx canvas.getContext(2d); this.text text; this.spring options.spring ?? 0.08; this.damping options.damping ?? 0.82; this.neighbor options.neighbor ?? 0.03; this.chars []; this._init(canvas, options); } _init(canvas, options) { const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; this.ctx.scale(dpr, dpr); this.ctx.font ${options.fontSize || 64}px sans-serif; this.ctx.textAlign center; this.ctx.textBaseline middle; // ... 字符拆分逻辑 } update() { // ... 物理更新 } render() { // ... 绘制 } }封装后换文字、换字号、换弹性参数都只改构造参数不用动内部逻辑。6.2 用 requestAnimationFrame 做统一调度多个实例共用一个循环const instances []; function loop() { for (const inst of instances) { inst.update(); inst.render(); } requestAnimationFrame(loop); } loop();这样帧率稳定也方便在页面隐藏时用document.hidden暂停。6.3 验证弹性是否“物理正确”的一个小技巧打开控制台给某个字符的v打日志观察它从触发到静止的曲线。正确的阻尼振荡应该是振幅逐次衰减、周期基本一致。如果振幅忽大忽小说明neighborForce引入了额外能量需要调低。这个习惯帮我省了很多“看起来怪但说不出哪怪”的调试时间。最后说一句实在的这个特效代码量不大但参数手感占七成。我一般会先把spring和damping调到自己看着舒服再考虑邻居耦合和交互触发。别一上来就堆功能先把单字弹对后面都是顺的。希望帮到你。本文还有配套的精品资源点击获取