Canvas vs HTML/CSS 能力对决
Canvas 能替代 HTML 和 CSS 吗？12 项特性实测、代码量对比、性能交叉点模拟——用数据说话
很多人觉得 Canvas 能画出任何界面就能替代 HTML/CSS。
下面用 12 项特性对比、代码量实测、性能模拟 告诉你真相。
实时对比：同一个按钮的两种实现
左边是 HTML + CSS 实现，右边是 Canvas 实现。试试以下操作，看看哪边能响应。
HTML + CSS（12 行代码）
Canvas（85 行代码）
亲手试验
对两边的按钮执行以下操作，观察结果差异：
12 项特性能力对比
点击分类标签切换，每项特性标注两种技术的支持程度
代码量对决
性能交叉点：多少元素时 Canvas 才更快？
拖动滑块改变渲染元素数量，观察 DOM 和 Canvas 的帧率变化。性能模型基于 Chrome DevTools 的典型测量数据。
元素数量：
10 个
Canvas 的主场：五个正确使用场景
Canvas 不适合做 UI，但这些场景里它无可替代
亲手体验 Canvas 主场
点击每个 demo 触发效果，这些场景 HTML/CSS 做不到或做不好
最终结论
数据与模型说明：特性支持级别基于 MDN Web Docs、WAI-ARIA 规范和 Chrome DevTools 文档。
性能模型基于 DOM 节点 reflow/repaint 成本对数增长模型与 Canvas 批量渲染固定开销模型，
交叉点约 ~1000 个同质动画元素（实际结果因设备、浏览器、具体实现而异）。
代码行数为实现等价功能（含 hover、焦点、无障碍）的最小完整代码。