Canvas 无限隧道动画：从视觉错觉原理到无缝循环实现

“无限隧道”这名字我第一次看到时，觉得有点故弄玄虚。直到亲手把效果跑起来，才发现这个叫法一点都不夸张：屏幕上只是一圈一圈的同心圆或者嵌套方框在不停向内收缩，可大脑偏偏产生了一种“前方有真实纵深”的错觉，甚至盯久了会有眩晕感。后来我把这效果用在网页首屏、品牌活动循环背景和线下大屏的视觉氛围里，它几乎没让我失望过。

这篇文章会把无限隧道从原理到实现完整拆开讲清楚。适合刚接触 Canvas 动画的前端开发者，适合正在做页面动效、互动视觉的设计师，也适合在活动现场做投影视觉或者音乐可视化实验的创意工作者。你不需要复杂的 3D 数学基础，只要会最基本的 Canvas 绘制和一点点变量控制，就能把第一版跑出来。

真正动手之后你才会发现，这个效果的难点不在于“画”，而在于“让它循环得看不出痕迹”。我最初实现时用了最简单粗暴的方式，结果画了一堆圆环却没让它们彼此配合，画面很快就显示出“隧道断裂”的破绽。怎么把这层窗户纸捅破，才是这篇文章真正想讲的。

1. 无限隧道的视觉原理：二维图形怎么骗过眼睛

1.1 深度感是从哪来的

想搞懂无限隧道，先要想清楚一个更基础的问题：我们为什么能看出真实隧道是“深”的。

真实场景至少提供了三个深度线索。第一是近大远小，隧道壁离观察者越远，看起来就越小，最后汇聚到视觉灭点；第二是近快远慢，近处物体在视野里移动得明显比远处物体快；第三是空气透视，远处的东西往往更模糊、对比度更低、颜色更偏灰蓝。人眼和大脑早就习惯把这三个线索自动换算成“距离”。

无限隧道的原理，就是用程序把这三个线索复刻出来。一组同心圆从外到内逐层收缩，模拟了“近大远小”；所有圆环每帧同时向中心靠近，构造了一个持续的视觉灭点；再通过颜色和亮度从上到下渐次变化，模拟空气透视。你看到的因此就不再是一堆位移的图形，而是一条时刻向前延伸的通道。

拿现实经验类比会更好理解。你在高速公路上开车，护栏上的反光板从眼前飞速掠过，远处的反光板却像在缓慢漂移。无限隧道里的每个圆环，每帧减少的半径像素数其实一样多，但因为越靠近中心的位置缩放比例越大，大脑会把这种统一运动解读成“我正沿着隧道向前冲”。视觉错觉的根源，就在于运动速度和人眼判断机制之间的错位。

1.2 无缝循环的关键点

第一次实现时，我犯过一个典型错误：让每个圆环持续缩小到 0，画到没有为止。结果几秒后，画面中心就漏出一根光秃秃的线，隧道断了。这个问题后来改用“循环重置”解决，但真正难的是让重置动作不被肉眼发现。

核心思路是：每当一个圆环缩小到接近中心时，立刻把它放回最外层的位置，重新开始收缩。因为单个圆环和它的邻居们长得非常像，加上整体运动速度一致，视觉系统很难捕捉到这个瞬移瞬间。你看到的永远是一个持续向深处延展的空间，而不是某个圆环跳来跳去。

要做到这一点有三个条件必须同时满足。第一，圆环之间的间距必须均匀；第二，每个圆环的收缩速度必须一致；第三，圆环数量、速度、最外层半径三者必须匹配，让整个循环的周期稳定。这三个条件只要有一个出问题，循环就会出现肉眼可见的卡顿或者跳变。我给这个页面列了一个“平滑度自查清单”，后面的实操部分会逐项对照说明。

2. 基础版本实现：用 Canvas 做一个同心圆隧道

这一节给出一份可以直接运行的基础代码。我尽量写直白，关键参数都保留注释，你可以照抄，也可以根据自己的场景改。

2.1 初始化画布与高清适配

无论做哪一个 Canvas 动画，第一步都是处理画布尺寸。尤其是高分辨率屏，如果你只用 CSS 设置宽高，图形会明显发糊。我习惯用devicePixelRatio先把物理像素映射处理好。

const canvas = document.getElementById('tunnel'); const ctx = canvas.getContext('2d'); let w, h; let centerX, centerY; let maxRadius; const RING_COUNT = 18; const rings = []; function resize() { const dpr = window.devicePixelRatio || 1; w = window.innerWidth; h = window.innerHeight; canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); centerX = w / 2; centerY = h / 2; maxRadius = Math.hypot(centerX, centerY); rebuildRings(); } window.addEventListener('resize', resize);

设完setTransform之后，之后所有的绘制代码都按逻辑像素走，不需要再关心物理像素，这个方法我用了几年，稳定靠谱。

之所以用Math.hypot(centerX, centerY)而不是直接用屏幕宽高中较小的那个值当半径，是为了让圆环铺满整个矩形视口。如果直接用min(w, h) / 2，屏幕的四角就会露出背景色，隧道看起来像被裁掉了一块，很不完整。

2.2 为圆环分配初始位置

这个效果里的每个圆环不需要复杂属性，只需要记住自己当前的半径。半径决定了它在隧道里的相对位置。

function rebuildRings() { rings.length = 0; for (let i = 0; i < RING_COUNT; i++) { rings.push({ r: maxRadius * (i / RING_COUNT) }); } }

初始化后，第 0 个环在最内层，第RING_COUNT - 1个环在最外层，相邻圆环的间距正好是maxRadius / RING_COUNT。这个均匀间距是整个效果保持稳定节奏的基础，我一般不会再手动去调它，除非刻意追求不规则风格。

2.3 主循环：更新、绘制、循环重置

动画主循环就三件事：更新位置、绘制画面、申请下一帧。

let speed = 2; function update() { for (let i = 0; i < rings.length; i++) { rings[i].r -= speed; if (rings[i].r < 0) { rings[i].r += maxRadius; } } } function draw(time) { ctx.clearRect(0, 0, w, h); ctx.fillStyle = '#0a0a12'; ctx.fillRect(0, 0, w, h); for (const ring of rings) { const progress = ring.r / maxRadius; const light = 20 + progress * 40; ctx.beginPath(); ctx.arc(centerX, centerY, ring.r, 0, Math.PI * 2); ctx.lineWidth = 1 + progress * 3; ctx.strokeStyle = `rgba(${light}, ${Math.round(light * 0.7)}, 255, 0.8)`; ctx.stroke(); } requestAnimationFrame(draw); } resize(); requestAnimationFrame(draw);

这里要解释几个看起来很“玄”的数值。progress表示当前圆环半径所占最大半径的比例，靠近中心的环 progress 接近 0，靠近边缘的环接近 1。为了模拟空气透视，我让靠近边缘的环更亮、更粗，靠近中心的环更暗、更细，这样中心就有了“距离更远、被空气遮挡”的感觉。

speed是最影响观感的参数。在常见的全屏尺寸下，我建议让最外层圆环从边缘收缩到中心花 2 到 4 秒。算一下：假设视口逻辑尺寸是 1920 乘 1080，中心到桌角的距离大约是 1100 像素。如果 speed 是 6，每帧跑 6 像素，按 60 帧每秒算，大约 3 秒跑完一轮，这个节奏比较舒适。太快会有闪烁感，太慢则让人感觉卡住了。

3. 进阶调节：让隧道具备真正的呼吸感

基础版本已经能跑了，但它只是“动起来”。真正让无限隧道耐看的，往往取决于你如何处理圆环数量、配色和速度曲线这三个维度。

3.1 圆环数量与场景质感

圆环数量直接决定画面的颗粒度。数量太少，比如 6 到 8 个，每个圆环之间的间隙很明显，画面更像旋转的齿轮，少了“深不见底”的绵延感。数量太多，比如 40 个以上，相邻圆环几乎贴在一起，视觉上会糊成一片，深度感反而被抹平了。

我自己的经验是：全屏展示用 15 到 24 个圆环最舒服；如果背景是半透明叠加在别的页面上，可以适当减少到 10 到 12 个，避免喧宾夺主；如果要做成近距离的投屏视觉，数量可以增加到 25 个左右，配合渐变颜色会非常细腻。你可以把圆环数量当成一个“质数毛衣”，数量的改变直接影响整个风格偏向哪端。

3.2 配色方案是另一个完全不同的作品

基础代码里我用的是蓝色到暗蓝色的渐变，效果已经够用。但如果你想做出让人眼前一亮的感觉，建议把颜色逻辑单独抽出来。

第一种是双色交替。修改绘制循环，给每个圆环一个索引，下标为偶数的用一种色，奇数的用另一种色，形成类似斑马条纹的层次。这种配色让隧道更像一段段展开的隧道壁，节奏感很强。

const hueA = 210, hueB = 160; const hue = (i % 2 === 0) ? hueA : hueB; ctx.strokeStyle = `hsl(${hue}, 70%, ${light}%)`;

第二种是色相旋转。利用time参数让色相缓慢漂移，隧道会在黑、蓝、紫、粉之间不断变化，适合音乐可视化或者活动暖场。

const hue = (i * 15 + time * 0.02) % 360; ctx.strokeStyle = `hsl(${hue}, 70%, ${light}%)`;

第三种是极简单色。只用白色或浅灰，通过透明度变化表达纵深。这种风格最接近“概念隧道”，适合配合文字排版或者极简品牌调性。我帮某个品牌展示页做背景时，就用过这种单色方案，配一句大标题和一个启动按钮，效果干净利落。

3.3 速度曲线：从匀速到呼吸感

基础版本的圆环是均匀收缩，视觉上很机械，但有时候机械感反而是优点，比如科技风界面。如果你想要更贴近“呼吸”的动态，就得把速度曲线从直线改成缓动曲线。

实现方法很简单：不直接操作半径，而是先操作一个从 1 到 0 的进度值，再用缓动函数换算成最终半径。

let progress = ring.progress; // 0 到 1 progress -= 0.003; if (progress < 0) progress += 1; // 用二次缓动制造先慢后快的推进感 const r = progress * progress * maxRadius; ring.r = r;

这样改完之后，圆环在靠近边缘时移动缓慢，靠近中心时突然加速，视觉上有一种“被吸入隧道”的张力。我比较喜欢这种效果，它会让人盯着屏幕的时间变长，因为大脑一直在等待下一次加速。

如果要更细微的呼吸感，可以给速度本身加一个低频振荡，比如用正弦函数让整体速度在一个小范围波动。这样隧道看起来就像在“浅呼吸”，适合冥想类应用或者长停留页面。

4. 变体扩展：方框隧道、粒子隧道与鼠标交互

无限隧道的骨架非常适合扩展。改一个函数、加一个交互，就能变成风格完全不同的新效果。

4.1 方框隧道：最省事的风格切换

把绘制圆环的arc换成strokeRect，效果立刻变成另一种气质。方框更有科技感，字符也更强，适合赛博朋克或者资料视觉。

ctx.strokeRect( centerX - ring.r, centerY - ring.r, ring.r * 2, ring.r * 2 );

稍微注意一点：方框和圆不同，圆环在四角天然会有空白，而方框会填满整个矩形构图，中心灭点更强。如果方框层数多，会很容易让人眼花，所以建议把圆环数量减掉三分之一，同时降低透明度。

4.2 粒子隧道：从致密线条变成星点流

圆环隧道画的是连续线条，粒子隧道则只在圆环的某一小段画点，并且让点的位置在每帧沿圆周旋转，会生成一种非常灵动的螺旋星团效果。

做法不复杂：在绘制圆环时，不直接画整个arc，而是计算当前圆周上的一个角度，然后画一个小圆点。

const angle = time * 0.001 + i * 0.7; const x = centerX + Math.cos(angle) * ring.r; const y = centerY + Math.sin(angle) * ring.r; ctx.fillStyle = `rgba(255, 255, 255, ${progress})`; ctx.fillRect(x, y, 3, 3);

把每个圆环上的点连起来，就会形成一条条断续的螺旋轨迹，隧道仿佛在旋转。这个变体非常适合粒子系统爱好者，后续你还可以调整角度差、点的大小和颜色，做出完全属于你自己的风格。

4.3 鼠标交互：让视觉中心跟着视线走

无限隧道如果只能呆板地固定中心点，看久了会腻。一个低成本又有效的交互是让隧道中心跟随鼠标轻微移动，模拟“视角漂移”。别直接等于鼠标坐标，那样画面会乱跳，要做平滑插值。

centerX += (mouseX - centerX) * 0.05; centerY += (mouseY - centerY) * 0.05;

每次更新中心位置后，所有圆环都重新围绕新的中心绘制，画面就会产生一种轻微的“视线转头”效果，立体感增强不少。我实测下来，偏移幅度控制在屏幕宽度的 10% 以内最自然，超出就会让圆环跑出视口，破坏隧道感。

5. 性能优化与常见问题排查

无限隧道本身性能开销不大，但一旦放到现场大屏或者低端手机上，问题就会暴露出来。我整理了踩过的坑和排查思路。

5.1 高刷新率下的速度失控

很多现代屏幕是 120 赫兹甚至 144 赫兹刷新率，如果你的动画逻辑还是每帧固定减一个固定像素值，在高刷新率屏幕上就会比普通 60 赫兹屏快一倍。解决方案是用时间差来计算位移，单位时间内的运动距离保持一致。

let lastTime = 0; function draw(time) { const delta = Math.min((time - lastTime) / 16.667, 2); lastTime = time; for (const ring of rings) { ring.r -= speed * delta; if (ring.r < 0) ring.r += maxRadius; } // ...绘制代码... requestAnimationFrame(draw); }

Math.min限制了最大增量，防止浏览器标签页切回来时播放一个超大跳跃。这一步非常值得加，尤其你的效果要用于真实项目而不是本地 demo。

5.2 模糊感与像素对齐

线条发糊往往不是技术问题，而是圆环半径带了小数。Canvas 在绘制非整数坐标时会进行抗锯齿处理，线条边缘看起来会“肉肉的”。如果你追求清晰锐利的科技感线条，可以把半径取整：

const r = Math.round(ring.r); ctx.arc(centerX, centerY, r, 0, Math.PI * 2);

另外，很多浏览器在 Windows 高分屏下的缩放设置会让 CSS 像素和设备像素之间出现小数偏移，此时要么依赖 DPR 适配，要么接受轻微的边缘模糊。像素对齐这件事，花时间纠结有时候性价比不高，我的经验是先看整体观感，再决定要不要做取整。

5.3 圆环跳变与“断裂感”

如果你看到某个圆环突然从中心跳回外圈，而且跳变非常明显，基本都是因为圆环之间间距不均匀，或者是速度曲线在重置时出现断裂。检查三处：一是初始化圆环时是否用了统一的递增步长；二是速度是否是每帧常量；三是当你自定义缓动函数时，半径曲线是否连续。缓动函数如果设计得有跳点，比如在进度接近 0 时不是归零而是直接跳回 1，就会产生明显的闪断。

5.4 常见问题速查表

6. 落地到真实场景的三种思路

基础效果做顺手之后，你会发现无限隧道特别容易接进各种实际项目，这里分享三个我验证过的方向。

第一种是网页首屏背景。我把它放在某个品牌官网的一级页面，使用极暗单色配色，圆环数量降到 12 个，速度调到每轮 6 秒。这样背景不会抢内容，又能给页面增加一种“往下走、往深处走”的暗示，用户停留时长有明显提升。文案标题放在画面中央，利用隧道中心的灭点天然聚焦视线，这是其他背景效果很难做到的。

第二种是线下活动循环视觉。在活动现场大屏上运行方框隧道变体，配合主题色做渐变，速度用低频正弦波动，画面在整场活动中反复运行都不会尴尬。此时随机粒子的加入可以进一步提升屏幕的“像素密度”，让画面更“贵”。

第三种是作为过渡动画。某些页面切换场景下，可以写一个短循环：圆环数量在一秒内从 20 降到 8，画面从致密变得稀疏，再切换下一页内容。这种用视觉结构变化代替瞬间跳转的过渡方式，在长滚动页和多屏演示里非常吃香。

每次跑完一轮无限隧道，我都会被同一个事实不断提醒：视觉效果的天花板，其实不是代码技巧，而是你对节奏和留意的控制。同样的几行代码，只要圆环数量、大小、速度曲线、颜色逐项微调，出来的作品就完全是两种气质。建议你拿到基础代码后，先按我给的参数运行一遍，然后只改一个变量，比如把RING_COUNT从 18 改成 8，再改成 30，观察画面气质的变化。你会很快建立起自己的审美判断，然后自然知道该往哪里扩展。