Canvas悬挂弹性文字特效：弹簧阻尼模型与鼠标交互实现

简介一份基于HTML5 Canvas的悬挂弹性文字交互特效代码面向有一定JavaScript基础、希望进阶动态网页开发的读者。资源通过Canvas绘制文字并结合鼠标移动事件与弹性物理模型实现文字被拖动后自然回弹的动态效果代码中涉及fillText、translate、requestAnimationFrame等关键API是理解前端动画原理的典型案例。压缩包共4个文件以HTML代码文件为主内含可运行的index.html特效页面、使用帮助txt文档以及两个来源说明url快捷方式整体仅3KB轻量易用。该资源已有213人学习浏览适合网页设计爱好者、前端初学者用于拆解Canvas动画逻辑或在个人项目中直接改造为交互式文字展示模块。1. 悬挂弹性文字特效一个小效果为什么值得花一下午调参打开一个营销活动页或者 html5 小游戏的标题页经常能看到一排文字像被看不见的绳子吊在页面顶部鼠标一碰就荡起来松手后还会带着惯性晃好几秒才停。这个效果就是“HTML5 Canvas 悬挂弹性文字特效”。它的核心只有三件事用 Canvas 把文字画出来、给文字加一个弹簧阻尼物理模型、再用鼠标事件把交互接进去。做 html5 网页设计作业或产品落地页时这个效果比普通 CSS 动画有质感得多而且代码量不大适合用来练 canvas 绘图和动画循环的基本功。本文按我实际做过的方式展开先讲 Canvas 初始化、文字测量和悬挂点再讲物理模型选型和参数调整接着是鼠标拖拽交互最后集中写踩过的坑。方向选对半天能出效果方向不对光“文字回荡停不下来”就能耗掉一整天。2. 把文字挂到 Canvas 上画布初始化与文字绘制的三个关键点2.1 高 DPI 适配不清屏就白干Canvas 最容易被新手忽略的是设备像素比。默认情况下一张宽度为 800 的 Canvas 画布在 Retina 屏上会被浏览器拉伸成 1600 物理像素来显示结果就是文字边缘发虚。悬挂弹性文字需要精细的描边和阴影模糊了会显得特别廉价。我一般这样初始化画布const canvas document.getElementById(stage); const ctx canvas.getContext(2d); const dpr window.devicePixelRatio || 1; // 逻辑尺寸CSS 像素 const cssWidth 800; const cssHeight 400; canvas.style.width cssWidth px; canvas.style.height cssHeight px; // 物理像素乘以 DPR canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; // 把所有绘图操作缩放 DPR 倍 ctx.setTransform(dpr, 0, 0, dpr, 0, 0);这段代码做的事情是先把 Canvas 的 CSS 尺寸固定再把内部绘图缓冲区的尺寸乘上devicePixelRatio最后用setTransform让后续所有坐标都基于 CSS 像素书写。否则文字就会模糊。注意setTransform必须在每次清屏前重新设置吗不需要只要不改动 transform它就一直有效但如果后面用了ctx.save()和ctx.restore()要注意恢复的时机。2.2 文字测量让“悬挂点”对准文字顶部中心悬挂弹性的前提是每个文字都有一个明确的“悬挂点”也就是摆在顶部的那根虚拟绳子的固定点。文字绘制时ctx.fillText(text, x, y)的 x 和 y 决定的是文字基线的起点而不是文字顶部。如果直接把文字画在绳端下方悬挂点会对不齐。我习惯把每个文字拆分成独立的对象用ctx.measureText()获取宽度再结合font字号计算出近似高度function createTextItem(text, x, y) { const font bold 40px Microsoft YaHei, sans-serif; ctx.font font; const metrics ctx.measureText(text); const width metrics.width; // 用字号大小近似文字高度再用 actualBoundingBoxAscent 更精确 const ascent metrics.actualBoundingBoxAscent || 32; const descent metrics.actualBoundingBoxDescent || 8; return { text, font, x, y, // 这是悬挂点绳子固定端 width, height: ascent descent, // 绘图时的偏移让文字顶部中心对准悬挂点 drawX: x - width / 2, drawY: y (ascent descent) / 2 }; }这里要注意actualBoundingBoxAscent和actualBoundingBoxDescent不是所有浏览器都返回精确值尤其是在较老的 WebView 里可能不存在。所以代码里加了兜底值。绘制文字时把drawX和drawY作为fillText的坐标这样文字看起来就是“挂”在 y 点上左右居中。2.3 把文字状态封装成对象单个文字不仅要画还要参与物理计算。需要一个状态对象把位置、速度和“当前偏移角”捆在一起。这里的“偏移角”指的是绳子与现实垂直方向的夹角用弧度表示。class PendulumText { constructor(item) { this.text item.text; this.font item.font; this.anchorX item.x; this.anchorY item.y; this.drawX item.drawX; this.drawY item.drawY; this.width item.width; this.height item.height; // 物理状态角度、角速度、角加速度 this.angle 0; // 当前角度弧度 this.angularVel 0; // 角速度 this.angularAcc 0; // 角加速度 // 拖拽状态 this.dragging false; this.dragOffsetX 0; this.dragOffsetY 0; } draw(ctx) { ctx.save(); // 把坐标系移到悬挂点旋转再画文字 ctx.translate(this.anchorX, this.anchorY); ctx.rotate(this.angle); ctx.font this.font; ctx.fillStyle #333; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(this.text, this.width / 2 - this.width / 2, this.height / 2); ctx.restore(); } }这里有个容易算错的地方ctx.translate(anchorX, anchorY)之后原点已经在悬挂点了。如果直接fillText(text, 0, 0)文字会以基线对齐原点导致文字上半部分跑到绳子上方。所以我在绘制时用textAligncenter和textBaselinemiddle然后把纵坐标写成this.height / 2这样文字中心正好落在悬挂点下方半个字高的位置。实际效果是文字像被一根看不见的线从顶部吊着。为什么不用 CSS transform 而要用 Canvas 原生变换因为后续物理模型需要精确控制旋转角度Canvas 的rotate和translate组合不会受 CSS 动画的插值影响每一帧的状态完全由我们自己计算调试起来更直观。3. 悬挂与弹性用弹簧-阻尼模型模拟摆动的落地细节3.1 为什么不用单摆模型一开始我图省事直接套“单摆”公式angularAcc -g / L * sin(angle)。这在数学上是对的但数字积分如果不做小步长角度会越积越离谱。尤其是拖拽后快速松手sin(angle)在接近 90° 时变化很快按帧率 60fps 计算每帧大约 16ms这个步长下单摆公式会损失能量甚至出现角度漂移。解决办法有两个把物理更新拆成多个子步长或者改用弹簧-阻尼模型。弹簧-阻尼模型的好处是它不直接计算重力分量而是把“回到垂直位置”的力抽象成弹簧拉力加上一个阻尼力数值上更稳定参数也更好理解。3.2 弹簧-阻尼模型的数学表达式与离散化弹簧模型的思路是角度越偏离 0恢复力越大阻尼力与角速度成正比方向相反。于是角加速度可以写成angularAcc -k * angle - c * angularVel这里 k 是弹性系数刚度c 是阻尼系数。注意这个模型里的重力已经在“垂直位置是平衡点”里被隐式处理了不需要显式写g。每帧更新的离散代码长这样function updatePhysics(item, dt) { const k 3.0; // 弹性系数越大回摆越快 const c 0.8; // 阻尼系数越大停得越快 // 角度、角速度、角加速度的欧拉积分 item.angularAcc -k * item.angle - c * item.angularVel; item.angularVel item.angularAcc * dt; item.angle item.angularVel * dt; // 防止数值爆炸角度限幅在 ±90°约 1.57 弧度 if (item.angle 1.57) { item.angle 1.57; item.angularVel 0; } else if (item.angle -1.57) { item.angle -1.57; item.angularVel 0; } }这里的dt是关键。如果你直接用requestAnimationFrame回调里的时间戳差值第一次回调的dt可能很大特别是浏览器标签页从后台切回来时dt可能是 300ms。这时欧拉积分会产生巨大的角速度文字瞬间飞出去。所以我习惯把dt限制在 0.05 秒50ms以内let lastTime 0; function animate(time) { const dt Math.min((time - lastTime) / 1000, 0.05); lastTime time; // 更新和绘制... requestAnimationFrame(animate); } requestAnimationFrame(animate);欧拉积分在dt小到 16ms 时已经够用不需要上 Runge-Kutta。但如果你把 k 调得很大超过 10建议每帧拆成 3 个 1/60 子步长function updatePhysics(item, dt) { const subSteps 3; const h dt / subSteps; for (let i 0; i subSteps; i) { item.angularAcc -k * item.angle - c * item.angularVel; item.angularVel item.angularAcc * h; item.angle item.angularVel * h; } }子步长的代价是计算量增加但 3 次乘法对现代浏览器来说可以忽略不计。3.3 三个必调参数刚度 k、阻尼 c、重力 g 的真相既然模型里没有显式重力为什么标题里还要提重力因为如果你想让文字在松开后有“被拉回来然后冲过平衡点”的感觉实际上需要两个参数配合k 控制“冲劲”大小c 控制衰减快慢。参数取值范围调参经验k弹性系数1.0 ~ 8.0小于 2 时文字软绵绵像在水里漂大于 6 时回弹速度快适合短促有力的效果c阻尼系数0.2 ~ 2.0小于 0.5 会来回晃 10 秒以上0.8 ~ 1.0 是“晃两三下就停”的自然手感初始角度0.2 ~ 0.8 弧度进入页面后如果不做交互文字会从初始角度开始荡角度越大开场越有动感我曾经把 k 设成 1.0、c 设成 0.1效果是文字像被粘在糖浆里拖拽半天都拉不回来。后来把 k 提高到 3.0、c 提高到 0.8视觉上才“精神”起来。调参时不要只看数值要盯着实际摆动次数正常人眼看两三下摆动开始收敛是舒服的超过五下说明阻尼太小。4. 交互与动效拖拽、随手感与多字悬挂4.1 鼠标拾取判断点击是否命中文字要让文字能被鼠标“抓起来”第一步是判断鼠标位置是否落在文字范围内。矩形判定的精度足够因为悬挂文字是横向的不需要逐像素检测。canvas.addEventListener(pointerdown, (e) { const rect canvas.getBoundingClientRect(); const mouseX e.clientX - rect.left; const mouseY e.clientY - rect.top; const hit textItems.find(item { // 计算文字当前位置的包围盒 const left item.anchorX - item.width / 2; const right item.anchorX item.width / 2; const top item.anchorY; const bottom item.anchorY item.height; return mouseX left mouseX right mouseY top mouseY bottom; }); if (hit) { hit.dragging true; // 记录鼠标拖拽点相对悬挂点的偏移 hit.dragOffsetX mouseX - hit.anchorX; hit.dragOffsetY mouseY - hit.anchorY; canvas.setPointerCapture(e.pointerId); } });这里用的是pointerdown而不是mousedown是为了兼顾触摸屏。很多做 html5 网页设计作业的同学用手机预览mousedown在触摸设备上要额外处理touchstart用pointer事件一劳永逸。注意dragOffsetX和dragOffsetY记录的是鼠标相对悬挂点的偏移。这样拖拽时不会出现文字“跳”到鼠标位置的情况。4.2 拖拽状态下的物理抑制拖拽时文字不应该继续做弹簧运动否则鼠标拖着一个还在抖的东西会特别难瞄准。常见的做法是拖拽进行中直接把angle计算成鼠标位置与悬挂点之间的夹角并把角速度清零。function updateInteraction(item, mouseX, mouseY) { if (!item.dragging) return; const dx mouseX - item.anchorX; const dy mouseY - item.anchorY; // 计算目标角度顺时针为正 const targetAngle Math.atan2(dy, dx) Math.PI / 2; // 直接赋予角度不经过弹簧计算 item.angle targetAngle; item.angularVel 0; item.angularAcc 0; }这里有一个坐标方向容易搞混Canvas 的 Y 轴向下所以Math.atan2(dy, dx)返回的是从 X 正方向顺时针的角度。当鼠标在悬挂点正下方时dy是正数atan2接近 90°π/2加上一个 π/2 会变成 180°这显然不对。正确的写法是直接item.angle Math.atan2(mouseY - item.anchorY, mouseX - item.anchorX) - Math.PI / 2或者更直观地让角度等于鼠标相对悬挂点的“极角”再偏移 90°因为 0 弧度表示垂直向下。我用过这个容易翻车的写法// 错误示范这样会反转方向 item.angle Math.atan2(dy, dx) Math.PI / 2;正确做法// 正确极角 - 90°让 0 弧度对应“垂直向下” item.angle Math.atan2(dy, dx) - Math.PI / 2;你可以测试一下鼠标在悬挂点正下方时dx≈0, dy0atan2返回 π/2减 π/2 等于 0角度刚好为 0表示不偏。鼠标在右侧时dx0, dy≈0atan2返回 0减 π/2 等于 -π/2表示顺时针旋转视觉上文字向右倾正确。4.3 多个文字交错悬挂相位与随机偏移很多漂亮效果不是单字而是一整排文字每个字单独挂。比如“HTML5 CANVAS”九个字母每个字母都有自己的摇晃节奏。这时如果所有字母初始角度一样、弹簧参数一样它们会同步摆动看起来像一整块木板在晃缺少灵动感。我给每个字设置随机初始相位初始角度和微小的弹性系数差异textItems.forEach((item, i) { item.angle (Math.random() - 0.5) * 0.4; // 初始角度在 ±0.2 弧度 item.k 2.8 Math.random() * 0.4; // 刚度在 2.8~3.2 之间 item.c 0.7 Math.random() * 0.2; // 阻尼在 0.7~0.9 之间 });这样每个字的摆动频率略有不同几秒钟后就会形成参差错落的“合声”感。注意不要把 k 的随机范围拉太大否则有的字晃得快有的字晃得慢视觉上会乱。4.4 和现有页面结合示例代码讲解如果想把效果塞进一个已经存在的页面而不是单独一个 Canvas 页面需要处理页面滚动和元素遮挡。我的做法是把 Canvas 定位到容器中并设置pointer-events: none只在需要交互时给 Canvas 加上事件。实际上悬挂文字作为装饰性元素通常不需要和滚动条产生复杂关系所以直接让 Canvas 容器用position: relativeCanvas 宽高 100%内部position: absolute即可。一个小型可运行的完整示例结构大致是!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title悬挂弹性文字示例/title style body { margin: 0; background: #f5f5f5; } .hero { width: 100%; height: 240px; position: relative; } canvas { display: block; width: 100%; height: 100%; } /style /head body div classhero canvas idstage/canvas /div script srcpendulum.js/script /body /html这里的pendulum.js负责初始化和动画循环。需要提醒的是Canvas 的width/height和 CSS 的宽高是两套体系如果不设置 CSS 高度Canvas 默认只有 300x150 像素。上面样式里用了height: 100%但父容器.hero必须要有确定高度否则 100% 无效。鼠标事件里我建议用canvas.getBoundingClientRect()来算鼠标位置而不是直接用offsetX。原因很简单如果你的 Canvas 不是从页面左上角开始的offsetX在某些浏览器里受 padding 和 border 影响算出来的坐标会偏移。而clientX - rect.left是经过验证最稳的方式。5. 悬挂弹性文字的避坑指南4 个让效果翻车的常见问题5.1 现象文字在高分屏上发虚像没戴眼镜原因没有做 DPR 适配。Canvas 的绘图缓冲区大小和 CSS 显示尺寸不一致浏览器把缓冲区拉伸显示时产生模糊。解决参看 2.1 节的setTransform(dpr, 0, 0, dpr, 0, 0)。有一个额外小坑如果你在初始化之后又调用了canvas.width widthCanvas 会重置所有状态包括 transform。所以任何地方重新设置canvas.width之后都要重新执行ctx.setTransform(dpr, 0, 0, dpr, 0, 0)否则会突然回到模糊状态。5.2 现象文字松手后一直停不下来来回晃十几秒原因阻尼系数太小。弹簧模型里如果没有足够的阻尼能量衰减很慢。特别是你用了k3, c0.1这种参数相当于一个几乎无摩擦的弹簧。解决先调c不要动k。把c从 0.1 逐步提高到 0.6、0.8观察摆动次数。如果提高到 1.2 以上文字会很“肉”几乎看不到回弹那再略微提高k。我个人的经验组合是k3.0, c0.8适合 40~60px 字号。5.3 现象拖拽时文字“飞”到屏幕外甚至角度变成几百弧度原因拖拽时直接做atan2得到的目标角度没有限幅或者物理更新里的角度累积超过了可接受范围。还有一个隐藏问题松手的瞬间如果angularVel没有被置零它会带着一个巨大的初始角速度继续计算导致越荡越大。解决在pointerup事件里把角速度清零并且给角度加限幅canvas.addEventListener(pointerup, (e) { const hit textItems.find(item item.dragging); if (hit) { hit.dragging false; hit.angularVel 0; // 松手时从静止开始弹 // 把角度限幅在正负 60° 内防止拖拽过头 hit.angle Math.max(-1.04, Math.min(1.04, hit.angle)); } });限幅 1.04 弧度约等于 60°。如果你希望拖拽可以拉到接近 90° 再松手可以放宽到 1.4但要注意文字在 90° 附近时它的包围盒与鼠标拾取矩形会有很大偏差因为我们是按未旋转的矩形做命中的。5.4 现象动画卡顿标签页切回来以后文字直接乱跳原因requestAnimationFrame在后台会被暂停切回来时回调里的time会有一个很大的跳变。如果直接把time - lastTime当成dt这个值可能变成 0.5 秒甚至更多物理积分会瞬间推算出极端角度。解决限制dt的最大值我一般用Math.min(0.05, (time - lastTime) / 1000)。这样即使切走一分钟回来也只按 50ms 的步长补一帧。还有一个优化如果dt超过 0.1可以选择直接重置lastTime不做物理更新下一帧再平滑继续。5.5 现象文字字体加载前后宽度变化导致悬挂点错位原因measureText在字体加载完成前测出的宽度是回退字体的等真正字体加载后文字变宽或变窄但悬挂点位置已经固定。解决在字体加载完成后重新测量宽度并更新drawX和drawY。常见做法是用document.fonts.ready或document.fonts.load()等待字体document.fonts.ready.then(() { // 重新遍历文字调用 measureText 更新宽度 textItems.forEach(item { ctx.font item.font; const metrics ctx.measureText(item.text); const width metrics.width; const ascent metrics.actualBoundingBoxAscent || 32; const descent metrics.actualBoundingBoxDescent || 8; item.width width; item.height ascent descent; item.drawX item.anchorX - width / 2; item.drawY item.anchorY (ascent descent) / 2; }); });如果你用的是系统字体比如 “Microsoft YaHei” 或 “PingFang SC”一般不需要等。但用了自定义 web font 时这是必踩的坑。6. 让效果更好看相位随机化、帧率自检与交作业级封装6.1 用相位差让多字摆动错落前面 4.3 节提到了随机初始角度和弹性系数现在补一个更可控的做法按文字索引递增加初始相位。比如第 i 个字的初始角度为i * 0.06弧度这样即使 k 和 c 完全一样初始位移的差异也会让每个字处于不同的摆动阶段。注意相位差不要超过 0.3 弧度否则整排文字会呈现明显的“波浪”而不是“错落”。6.2 帧率自检用 performance.now() 验证调试时我习惯在动画循环里累计帧数每 60 帧检测一次帧率let frameCount 0; let lastFpsTime 0; let fps 0; function animate(time) { frameCount; if (time - lastFpsTime 1000) { fps frameCount * 1000 / (time - lastFpsTime); frameCount 0; lastFpsTime time; console.log(FPS:, fps.toFixed(1)); } // 其他物理和绘制代码 requestAnimationFrame(animate); }如果 fps 低于 50说明绘制太重。优先检查是否每一帧都调用了measureText这个 API 非常贵应该只在初始化时调用一次动画循环里只做fillText。6.3 封装成适合复用的一个小插件最后把整个效果封装成一个类暴露start、destroy和setOption方法。这样无论是写 html5 网页设计作业还是放进公司活动页都能直接导入使用。核心思路是外部不用关心 Canvas 细节只需要传入一个容器节点和文字数组。class HangWords { constructor(container, words) { this.canvas document.createElement(canvas); container.appendChild(this.canvas); // ...初始化 DPR、文字对象、事件绑定 } setOption(key, value) { /* 改 k / c / 字号 */ } start() { /* 启动动画 */ } destroy() { /* 取消动画、解绑事件 */ } } // 用法 const hw new HangWords(document.querySelector(.hero), [HTML5, Canvas, 弹性文字]); hw.start();我在封装时踩过一个小坑destroy里如果忘记cancelAnimationFrame组件销毁后动画还在跑占 CPU 不说鼠标事件还可能操作已卸载的 DOM。所以destroy里一定要保存requestAnimationFrame的 id。另外多个组件同时存在时要避免共用全局变量——每次start都重新绑定自己的事件处理函数。做了这么多年 canvas 绘图我最大的教训是物理效果的“手感”比参数标准值重要得多。不要迷信网上抄来的 k 和 c一定要拿真机预览触摸屏和鼠标的响应速度完全不同。希望这篇文章能帮你把这个悬挂弹性文字特效一口气做出来少走点我当年走过的弯路也希望你在调阻尼和摆动幅度时可以玩出更多自己的花样。本文还有配套的精品资源点击获取