最近我做了个挺有意思的小实验。
我把一个二次元角色的小动画效果，分别用：
- WebGL
- Canvas 2D
- 纯 DOM + CSS
实现了三遍。
效果本身不复杂：
- 眨眼
- 眉毛/下眼皮联动
- 流汗轻微飘动
- 呆毛甩动
但真正有意思的，其实不是“做出来”。
而是：
同一个东西，用三种技术栈实现时，到底会差多少？
本质上就是一次“前端图形学味很浓”的复刻实验。
一开始只是想复刻一个呆毛动画
灵感来源：
https://tamanidamani.itch.io/nijikas-ahoge
我当时想法特别简单：“如果是我,要怎么实现？”
然后越做越上头。
最后直接演变成：
那我干脆把 WebGL、Canvas2D、DOM 三种方案都做一遍算了。
于是仓库就变成了现在这样：
三个版本同效果实现。
先说结论
如果只让我说一句话：
WebGL 最强，但 Canvas2D 最舒服，DOM 最适合业务
后面我慢慢讲。
1. WebGL 版本：最像“真正游戏开发”
这个版本是最折腾的。
因为它本质上已经不是“前端动画”了。
而是：GPU 图形编程
它到底怎么实现的？
核心思路其实就是：
- 底图一层
- 精灵图一层层贴
- shader 控制绘制
- JS 驱动动画参数
比如：
- 呆毛旋转
- 眨眼裁剪
- alpha 混合
这些其实都在 GPU 那边做。
你会开始接触：
- uniform
- texture
- shader
- UV
- 顶点坐标
- 纹理坐标
然后人会逐渐失去笑容。
但 WebGL 真强
当元素一多的时候。
WebGL 那种： “完全不慌”
的感觉特别明显。
尤其是：
- 高分辨率
- 多层贴图
- shader 特效
- 粒子
- 后处理
这种场景。
Canvas2D 会开始喘。
DOM 会开始卡。
WebGL 还在：
“继续上强度。”
但它的开发体验……
只能说：
非常硬核。
你随便一个东西：
“为什么贴图反了？”
你都可能查半小时。
因为：
- 坐标系不一样
- UV 方向不一样
- 纹理原点不一样
甚至：
你 shader 写错一个变量名，页面可能直接黑屏。
然后控制台一句人话都没有。
2. Canvas2D：写起来最爽的版本
因为它属于：
“复杂度刚刚好”。
drawImage 真的是神器
整个版本核心基本就是： ctx.drawImage(...)
不停画。
不停叠。
不停裁剪。
眨眼怎么实现？
这里我其实挺喜欢。
不是直接缩放。
而是：从上往下裁剪源图。
然后底边固定。
这样会更像真正的“闭眼”。
而不是简单的贴图压缩。
这种小细节其实特别影响观感。
呆毛怎么做？
Canvas2D 做旋转特别经典：
save()
translate()
rotate()
drawImage()
restore()围绕左下角支点转。
完事。
整个思路非常直觉。
为什么我觉得 Canvas2D 是甜点区
因为它有一种：
“既能做效果，又不用掉头发”
的平衡感。
不像 WebGL：
你还没开始做动画，
先被 shader 教做人。
但又不像 DOM：
做到后面会开始和浏览器布局系统打架。
Canvas2D 基本属于：
- 好调试
- 浏览器兼容强
- 思维负担小
- 足够自由
所以很多独立小游戏特别爱它。
真不是没原因。
3. DOM 版本：最不像“图形编程”的版本
这个版本其实最有意思。
因为它完全不依赖 canvas。
纯：
- HTML
- CSS
- JS
硬做。
五官全是 div
比如：
- 眼睛
- 眉毛
- 汗滴
本质都是： <div>
然后：
- background-position
- background-size
从 atlas 里裁。
合眼实现特别像 UI 技巧
这个方案我自己还挺喜欢。
用了： overflow: hidden;
做 mask。
然后里面那个 sprite 往下移动。
这样就实现了：
“从上往下闭眼”。
DOM 的最大优点
特别适合：真网页。
比如：
- UI 系统
- 按钮
- 文本
- 响应式布局
都能无缝融合。
但 DOM 真的会越来越重
尤其元素一多：
- layout
- repaint
- composite
全来了。
浏览器开始疯狂 recalculation。
然后你会发现：
自己正在用 CSS 做半个游戏引擎。
三种方案到底怎么选？
其实没有“谁秒谁”。
只有：你当前项目更像什么。
如果你要：
- 做复杂视觉特效
WebGL - 做独立小游戏
Canvas2D - 做网页交互角色
DOM
这项目我最大的感受
其实不同技术栈背后，
代表的是完全不同的渲染思维。
- WebGL 想的是：
GPU 怎么画 - Canvas2D 想的是：
我这一帧怎么绘制 - DOM 想的是：
浏览器怎么布局和合成
它们甚至不是同一种世界观。
最后
这个仓库本质上其实不是“做动画”。
而是在研究：
浏览器到底是怎么把东西画出来的。
以上内容建议配合代码食用：https://github.com/iAJue/CanvasGame
上回做这种对比的时候已经是上回了: 《如何优雅的提交一个表单》
太强了，面对这种强者，我没活着的意义，bye