最近我做了个挺有意思的小实验。
我把一个二次元角色的小动画效果，分别用：
- 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
上回做这种对比的时候已经是上回了: 《如何优雅的提交一个表单》
