跳过主内容 介绍 HTML-在-画布 API 源试验 Thomas Nattestad 多年来，网络开发者在构建复杂、高度互动的视觉应用程序时不得不做出艰难的架构选择。你应该依赖 DOM 的丰富语义特性，还是直接渲染到 <canvas> 元素以获得低级图形性能？使用新的实验性 HTML-在-画布 API ——现在在源试验中可用 ——你不必选择。此 API 允许你将 DOM 内容直接绘制到 2D 画布或 WebGL/WebGPU 纹理中，同时保持 UI 可交互、可访问，并与您最喜欢的浏览器功能连接。通过将 HTML 与低级图形处理结合，你可以创建以前不可能实现的体验。 DOM 与画布 为了理解这个新 API 的强大功能，我们需要看看 DOM 和画布的相对优势。DOM 是网络 UI 的主食。它提供开箱即用的文本布局解决方案，使用语义理解的内容创建丰富的界面。这使得用户能够在网页之间无缝执行常见操作——我们经常视为理所当然的事情，比如高亮文本以复制，或右键单击图像以保存。DOM 还与基本的浏览器功能集成：可访问性工具、翻译、页面内查找、阅读模式、扩展、黑暗模式、浏览器缩放和自动填充。相比之下，画布（以及 WebGL / WebGPU）允许低级访问来驱动像素网格以实现高度高级的 2D 和 3D 图形。游戏和复杂的网页应用（如 Google Docs 或 Figma）需要这种高性能、低级访问。因为画布基本上是一个像素网格，支持响应式文本等特性过去需要复杂的自定义 UI 逻辑，极大地增加了你的包大小。至关重要的是，当 UI 陷入静态画布像素网格时，与 DOM 集成的所有强大浏览器功能完全失效。 将 DOM 带入画布的优势 HTML-在-画布 API 是桥梁，让你获得两全其美。通过将 HTML 放置在 <canvas> 元素内并同步其变换，你确保内容保持完全互动，并且所有浏览器集成都能自动运行。通过让 DOM 处理你的 UI 嵌入在 <canvas> 元素中，你可以获得以下好处： 文本布局和格式：简化的文本布局和格式，包括包含 CSS 样式的多行或双向文本。 表单控件：表达性强且更易使用的表单控件，具有广泛的自定义选项。 文本选择、复制/粘贴和右键单击：用户可以在你的 3D 场景内高亮文本，或原生使用右键单击上下文菜单。 可访问性：渲染在画布内的内容暴露给可访问性树。可访问性系统可以像解析普通 HTML 一样解析 UI，并将其暴露给屏幕阅读器等系统。 页面内查找：用户可以使用页面内查找（Ctrl/Cmd+F）搜索文本，浏览器会直接在你的 WebGL 纹理中高亮显示。 可索引性和 AI 代理可接口：网络爬虫和 AI 代理可以无缝地索引和读取渲染到你的 2D 和 3D 场景中的文本。 扩展集成：浏览器扩展原生工作。例如，一个文本替换扩展会自动更新渲染在你的 3D 网格上的文本。 开发者工具集成：你可以检查你的画布内容，包括直接在 Chrome 开发者工具中检查 WebGL/WebGPU UI 元素。在检查器中调整 CSS 样式，立即看到在 3D 纹理上的更新！ 高级用例 此 API 解锁了多个领域的巨大潜力： 基于大型画布的应用程序：重型网页应用现在可以将复杂的应用 UI 组件原生渲染到其基于画布的工作区中，提高可访问性并减少包重量。 3D 场景和游戏：市场网站、沉浸式 WebXR 体验和网页游戏现在可以将完全可交互的网页 UI 放置到 3D 场景中——就像使用真实 DOM 文本的 3D 书籍，或者原生支持复制和粘贴的游戏内终端。 如何使用 API 使用 API 分为三个阶段：设置你的画布、在画布内渲染以及更新 CSS 变换，以便浏览器知道元素在屏幕上的实际位置。 前提条件 HTML-在-画布 API 在 Chrome 148 到 150 的源试验中。要在你的站点上测试它，请使用启用了 chrome://flags/#canvas-draw-element 选项的 Chrome Canary 149 或更高版本。要为其他用户启用该 API，请注册源试验。 第一步：基本画布设置 首先，在你的 <canvas> 标签中添加 layoutsubtree 属性。这使浏览器能够意识到嵌套在画布内部的内容，为其在画布内显示做准备，并暴露给可访问性树。