Gemini 的解释： 在过去，Canvas 只是“无脑”的像素画布。如果你想在 Canvas 里渲染一段 UI 或文字，你会失去浏览器原生自带的一切能力： • 没有屏幕阅读器支持（无障碍访问彻底...
TL;DR · AI 摘要
HTML-in-Canvas 是一项突破性 Web API，让 HTML 元素原生嵌入 Canvas 并参与布局与交互，同时支持 GPU 着色器渲染、3D UI 贴图和无障碍访问，彻底解决传统 Canvas 的语义缺失痛点。
核心要点
- HTML 元素可通过 layoutsubtree 属性成为 Canvas 子节点，参与 DOM 布局但默认不渲染
- drawElementImage() 提供像素捕获与坐标同步矩阵，实现 DOM 与 Canvas 渲染的精准对齐
- onpaint 事件替代 requestAnimationFrame，仅在内容变更时触发重绘，显著提升性能
结构提纲
按章节快速跳转。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- HTML-in-Canvas 新范式
- 核心问题
- 无障碍缺失
- 文本不可选
- 排版能力弱
- Hit Testing 需手动实现
- 关键技术
- layoutsubtree 属性
- drawElementImage() 方法
- onpaint 事件
- 能力扩展
- DOM 级着色器
- 3D UI 纹理贴图
- 原生交互保真
金句 / Highlights
值得收藏与分享的关键句。
让 HTML 负责结构、语义、排版和原生交互；让 Canvas 和 GPU 负责极致的像素级特效渲染。
你现在可以直接将 WebGL 片段着色器应用到标准的 HTML 元素上……这个表单依然可以正常打字和响应事件。
onpaint 事件……只有当子元素的渲染内容真正发生变化时，才会触发重绘。
连最基础的点击侦测（Hit Testing），都需要开发者手写数学公式在底层模拟。
在过去，Canvas 只是“无脑”的像素画布。如果你想在 Canvas 里渲染一段 UI 或文字，你会失去浏览器原生自带的一切能力：
• 没有屏幕阅读器支持（无障碍访问彻底瘫痪）。 • 无法原生长按选中文本。 • 无法处理复杂的多语言排版、连字和字体后备。 • 连最基础的点击侦测（Hit" / X
Gemini 的解释： 在过去，Canvas 只是“无脑”的像素画布。如果你想在 Canvas 里渲染一段 UI 或文字，你会失去浏览器原生自带的一切能力： • 没有屏幕阅读器支持（无障碍访问彻底瘫痪）。 • 无法原生长按选中文本。 • 无法处理复杂的多语言排版、连字和字体后备。 • 连最基础的点击侦测（Hit Testing），都需要开发者手写数学公式在底层模拟。 对于构建复杂生产力工具、AI 客户端界面或图形密集型应用来说，这意味着你要么在 Canvas 之上悬浮一层 DOM（容易出现同步错位和性能瓶颈），要么就像某些头部设计软件一样，咬牙从零开始用 WebGL 重写一整套文本和布局引擎。 HTML-in-Canvas 完美解决了这个痛点： 1.底层引擎分工：让 HTML 负责它最擅长的结构、语义、排版和原生交互；让 Canvas 和 GPU 负责极致的像素级特效渲染。 2.DOM 级着色器 (Shaders)：这是它爆火的核心原因。你现在可以直接将 WebGL 片段着色器应用到标准的 HTML 元素上。比如，让一个普通的 <input> 表单在打字时产生像素级的液化扭曲、扫描线切割，或者基于鼠标位置生成精确计算的 SDF (有向距离场) 动态光影。在经过 GPU 疯狂扭曲后，这个表单依然可以正常打字和响应事件。 3.3D 空间中的真实 UI：可以极其简单地将一个功能完整的 HTML 网页，当作纹理贴图完美附着在一个 3D 旋转的立方体表面，且依然可点可交互。 核心 API 原理 它的实现机制极其精简，主要依赖三个新的原语： • layoutsubtree 属性：加在 <canvas> 标签上。它允许 HTML 元素作为 Canvas 的子节点存在，并参与浏览器的正常 DOM 布局树计算，但默认不绘制到屏幕上。 • drawElementImage() 方法：将 DOM 元素捕获并绘制为 Canvas 像素。它会返回一个变换矩阵（Transform Matrix），在底层自动将真实的 DOM 物理坐标与画布上像素的渲染坐标保持完美同步。 • onpaint 事件：一个全新的响应式渲染机制。取代了传统极其消耗性能的 requestAnimationFrame 轮询，只有当子元素的渲染内容真正发生变化时，才会触发重绘。