🎨 HTML-in-Canvas 实验室
让真实交互式 HTML 直接渲染到 Canvas/WebGL/WebGPU——WICG 实验性提案，Chrome 148+ 源试用
💡 一句话理解
传统方案把 HTML 截图成静态位图贴到 Canvas——交互全丢。 HTML-in-Canvas 让真实 DOM 元素直接参与 Canvas 渲染管线， 保留完整交互、CSS 排版和无障碍支持。
| 维度 | 传统方案 (html2canvas) | HTML-in-Canvas |
|---|---|---|
| 交互性 | ❌ 仅静态位图，无任何交互 | ✅ 保留完整交互（输入、 点击、hover） |
| 无障碍 | ❌ 屏幕阅读器无法识别 | ✅ 原生支持，不破坏无障碍树 |
| 性能 | ❌ 重绘成本高，无硬件加速 | ✅ 支持 WebGL/WebGPU 加速，按需更新 |
| CSS 排版 | ❌ 需手动模拟复杂排版 | ✅ 原生 CSS 排版（多语言、SVG、Flex） |
| 3D 支持 | ❌ 需截图→上传纹理，无交互 | ✅ texElementImage2D 直接上传为 WebGL 纹理 |
| 实现复杂度 | ✅ 简单，引入库即可 | ⚠️ 实验性，需 Chrome 148+ + flag |
🔄 渲染流程对比
传统：html2canvas
HTML DOM→截图→静态位图
粘贴到 Canvas→❌ 无交互
每次内容变化都要重新截图，性能差
HTML-in-Canvas
HTML DOM→layoutsubtree
paint 事件→drawElementImage()
Canvas/WebGL/WebGPU→✅ 完整交互
按需更新（paint 事件），支持 GPU 加速
2D Canvas
ctx.drawElementImage()直接绘制到 2D 画布，返回变换矩阵用于交互同步
WebGL
gl.texElementImage2D()上传为 WebGL 纹理，可在 3D 场景中使用
WebGPU
queue.copyElementImageToTexture()复制到 WebGPU 纹理，最高性能路径