多年来，Web 开发者在构建复杂的、高度互动的可视化 Web 应用时，不得不做出艰难的架构选择：是应该依赖 DOM 的丰富语义功能，还是直接渲染到 <canvas> 元素以获得底层图形性能？
借助全新的实验性 HTML-in-Canvas API（现已在源试用中提供），您无需做出选择。借助此 API，您可以将 DOM 内容直接绘制到 2D 画布或 WebGL/WebGPU 纹理中，同时保持界面的可交互性、可访问性，并与您喜爱的浏览器功能相关联。通过将 HTML 与底层图形处理相结合，您可以打造前所未有的体验。
DOM 与 Canvas
为了解这个新 API 的强大功能，不妨先看看 DOM 和 Canvas 的相对优势。
DOM 是 Web 界面的主要组成部分。它提供开箱即用的文本布局解决方案，使用语义理解的内容来创建丰富的界面。这样，用户就可以在网页上顺畅地执行常见操作，例如突出显示文本以进行复制，或右键点击图片进行保存，这些都是我们习以为常的操作。DOM 还与重要的浏览器功能集成，包括无障碍工具、翻译、在页面中查找、阅读器模式、扩展程序、深色模式、浏览器缩放和自动填充。
另一方面，Canvas（以及 WebGL/WebGPU）允许进行底层访问，以驱动像素网格，从而实现高度先进的 2D 和 3D 图形。游戏和复杂的 Web 应用（例如 Google 文档或 Figma）需要这种高性能的底层访问权限。由于画布本质上是一个像素网格，因此支持自适应文本等功能过去需要复杂的自定义界面逻辑，这会大幅增加软件包大小。至关重要的是，当界面被困在静态画布像素网格中时，集成到 DOM 中的所有强大浏览器功能都会完全失效。
将 DOM 引入 Canvas 的优势
HTML-in-Canvas API 是一座桥梁，让您能够兼得两者的优势。通过将 HTML 放置在 <canvas> 元素中并同步其转换，您可以确保内容保持完全互动，并且所有浏览器集成都能自动运行。
通过让 DOM 在 <canvas> 元素内处理界面，您可以获得以下优势：
- 文本布局和格式设置：简化的文本布局和格式设置，包括应用了 CSS 样式的多行或双向文本。
- 表单控件：富有表现力且更易于使用的表单控件，具有丰富的自定义选项。
- 文本选择、复制/粘贴和右键点击：用户可以突出显示 3D 场景中的文本，或原生右键点击上下文菜单。
- 无障碍功能：在画布内呈现的内容会向无障碍功能树公开。无障碍系统可以像解析普通 HTML 一样解析界面，并将其提供给屏幕阅读器等系统。
- 页内查找：用户可以使用页内查找 (Ctrl/Cmd+F) 搜索文本，浏览器会直接在 WebGL 纹理中突出显示该文本。
- 可编入索引且可与 AI 智能体交互：网络爬虫和 AI 智能体可以无缝地将 2D 和 3D 场景中呈现的文本编入索引并读取这些文本。
- 扩展程序集成：浏览器扩展程序可原生运行。例如，文本替换扩展程序会自动更新 3D 网格上呈现的文本。
- 开发者工具集成：您可以直接在 Chrome 开发者工具中检查画布内容，包括 WebGL/WebGPU 界面元素。在检查器中调整 CSS 样式，即可看到 3D 纹理即时更新！
宽泛应用场景
此 API 可在多个领域释放巨大潜力：
- 大型 Canvas 应用：重量级 Web 应用现在可以将其复杂的应用界面组件原生渲染到 Canvas 驱动的工作区中，从而提高无障碍性并减轻软件包重量。
- 3D 场景和游戏：营销网站、沉浸式 WebXR 体验和网页游戏现在可以将完全可交互的网页界面放入 3D 场景中，例如使用真实 DOM 文本的 3D 书籍，或原生支持复制和粘贴的游戏内终端。
如何使用该 API
使用该 API 分为三个阶段：设置画布、渲染到画布中，以及更新 CSS 转换，以便浏览器知道元素在屏幕上的实际位置。
前提条件
HTML-in-Canvas API 将在 Chrome 148 至 150 中进行源试用。如需在您的网站上测试该功能，请使用 Chrome Canary 版 149 或更高版本，并启用 chrome://flags/#canvas-draw-element 标志。如需为其他用户启用该 API，请注册源试用。
第 1 步：基本 Canvas 设置
首先，向 <canvas> 标记添加 layoutsubtree 属性。这样，浏览器就能感知到画布中嵌套的内容，做好在画布中显示这些内容的准备，并将其公开给无障碍树。
<canvas id="canvas" style="width: 200px; height: 200px;" layoutsubtree>
<div id="form_element">
<label for="name">Name:</label> <input id="name" type="text">
</div>
</canvas>
调整画布网格的大小
为避免呈现的内容模糊不清，请务必调整画布网格的大小，使其与设备缩放比例相匹配。
const observer = new ResizeObserver(([entry]) => {
const dpc = entry.devicePixelContentBoxSize;
canvas.width = dpc ? dpc[0].inlineSize : Math.round(entry.contentRect.width * window.devicePixelRatio);
canvas.height = dpc ? dpc[0].blockSize : Math.round(entry.contentRect.height * window.devicePixelRatio);
});
const supportsDevicePixelContentBox =
typeof ResizeObserverEntry !== 'undefined' &&
'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box' } : {};
observer.observe(canvas, options);
第 2 步：渲染
对于 2D 上下文，请使用 drawElementImage 方法。请在 paint 事件中执行此操作，该事件会在元素每次重新绘制时触发，例如在文本突出显示或用户输入期间。请务必使用返回值更新元素的 CSS 转换，以便互动功能继续正常运行。
const ctx = document.getElementById('canvas').getContext('2d');
const form_element = document.getElementById('form_element');
const canvas = document.getElementById('canvas');
canvas.onpaint = () => {
ctx.reset();
// Draw the form element at x:0, y:0
let transform = ctx.drawElementImage(form_element, 0, 0);
// Use the transform returned later on...
};
使用 WebGL 渲染
对于 WebGL，您可以使用 texElementImage2D。其功能与 texImage2D 类似，但将 DOM 元素作为来源。
canvas.onpaint = () => {
if (gl.texElementImage2D) {
gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, form_element);
}
};
使用 WebGPU 进行渲染
WebGPU 在设备队列中使用 copyElementImageToTexture 方法，类似于 copyExternalImageToTexture：
canvas.onpaint = () => {
root.device.queue.copyElementImageToTexture(
valueElement,
{ texture: targetTexture }
);
};
第 3 步：更新 CSS 转换
现在，您已将元素渲染到画布中，接下来必须向浏览器更新其所在位置。这可确保画布与 DOM 布局之间的空间同步。这一点非常重要，因为浏览器需要正确地将事件区域（例如用户点击或悬停的确切位置）与元素的呈现位置进行映射。
对于 2D 上下文，请将渲染调用返回的转换应用于 .style.transform property：
const ctx = document.getElementById('canvas').getContext('2d');
const form_element = document.getElementById('form_element');
const canvas = document.getElementById('canvas');
canvas.onpaint = () => {
ctx.reset();
// Draw the form element at x:0, y:0
let transform = ctx.drawElementImage(form_element, 0, 0);
// Sync the DOM location with the drawn location
form_element.style.transform = transform.toString();
};
使用 WebGL 或 WebGPU 时，元素的屏幕位置取决于着色器代码如何使用输出纹理，无法从画布渲染上下文推导出来。不过，如果您的着色器程序使用典型的模型视图投影来绘制纹理，则可以使用新的便捷函数 element.getElementTransform() 来计算转换，该转换的使用方式与 drawElementImage() 的返回值相同。为此，您需要执行以下操作：
- 将 WebGL MVP 矩阵转换为 DOM 矩阵。
- 对 HTML 元素进行标准化。HTML 元素的大小以像素为单位（例如，宽度为 200 像素）。不过，WebGL 通常会将对象视为“单位正方形”，例如，范围从 0 到 1。如果不进行归一化，200 像素的按钮看起来会大 200 倍。
- 映射到画布视口。此步骤是“重新缩放”阶段。它会重新拉伸该单位空间数学运算，以匹配屏幕上
<canvas>元素的实际像素尺寸。它还会翻转 Y 轴，因为在 WebGL 中，向上为正，但在 CSS 中，向下为正。 - 计算最终转换。按顺序将这些矩阵相乘：
Viewport * MVP * Normalization.。将它们组合成一个最终转换，会生成一个“映射”，该映射会确切地告诉浏览器该 HTML 元素层应位于何处，以便与 3D 绘图对齐。 - 将转换应用于 HTML 元素。这会将 HTML 元素层移至其渲染像素的正上方。这样可以确保用户在点击按钮或选择文本时，点击的是真实的 HTML 元素。
if (canvas.getElementTransform) {
// 1. Convert WebGL MVP Matrix to DOM Matrix
const mvpDOM = new DOMMatrix(Array.from(htmlElementMVP));
// 2. Normalize the HTML element (pixels -> 1x1 unit square)
const width = targetHTMLElement.offsetWidth;
const height = targetHTMLElement.offsetHeight;
const cssToUnitSpace = new DOMMatrix()
.scale(1 / width, -1 / height, 1) // Shrink to unit size and flip Y
.translate(-width / 2, -height / 2); // Center the element
// 3. Map to the canvas viewport
const clipToCanvasViewport = new DOMMatrix()
.translate(canvas.width / 2, canvas.height / 2) // Move origin to center
.scale(canvas.width / 2, -canvas.height / 2, 1); // Stretch to canvas dimensions
// 4. Multiply: (Clip -> Pixels) * (MVP) * (pixels -> unit square)
const screenSpaceTransform = clipToCanvasViewport
.multiply(mvpDOM)
.multiply(cssToUnitSpace);
// 5. Apply to the transform
const computedTransform = canvas.getElementTransform(targetHTMLElement, screenSpaceTransform);
if (computedTransform) {
targetHTMLElement.style.transform = computedTransform.toString();
}
}
库和框架支持
一些热门库已经支持 HTML-in-Canvas 功能。
Three.js
手动更新矩阵可能很繁琐，因此框架已经开始采用这种方法。Three.js 实验性地支持使用新的 THREE.HTMLTexture：
const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
PlayCanvas
PlayCanvas 还支持使用其纹理 API 在 Canvas 中嵌入 HTML：
// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();
// Keep up to date
canvas.addEventListener('paint', onPaintUpload);
const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();
演示
在试用演示之前，请确保您的环境已正确配置。
我们提供了多个演示，可作为使用该 API 的参考。我们已经看到社区中涌现出各种富有创意的解决方案，从可翻译的 3D 书籍到通过玻璃着色器折射的界面元素，不一而足：
- 3D 书籍：使用 WebGL 渲染的 3D 书籍，其页面采用 HTML 布局。用户可以使用 CSS 切换字体。由于它是基于 DOM 的，因此内置翻译功能可以即时运行，AI 智能体也可以更轻松地提取文本。
- 互动式 3D 界面：一个 WebGPU 果冻滑块，可根据底层 3D 模型折射光线，同时仍能响应标准 HTML
<input type="range">步长属性。 - 动画纹理：一个动态 3D 广告牌，使用 DOM 将动画 SVG 铅笔直接渲染到 WebGL 纹理中，无需自定义动画循环。
- 折射叠加层：一个交互式排版层，会因移动的 3D 光标而变形，但仍可完全选中，并可使用“页内查找”功能进行搜索。
查看社区创建的演示集合。如果您希望自己的 HTML-in-Canvas 演示出现在此集合中，请创建拉取请求以添加该演示。
限制
虽然该 API 功能强大，但也有一些有意为之的限制：
- 跨源内容：出于安全和隐私原因，该 API 不适用于跨源 iframe 内容。
- 主线程滚动：画布中的 HTML 是使用 JavaScript 绘制的，这意味着滚动和动画无法独立于 JavaScript 进行更新，就像它们在画布之外一样。开发者应仔细考虑将滚动内容放入画布内与让整个画布滚动这两种方式的性能特征。
反馈
如果您正在试用 HTML-in-Canvas API，我们非常期待收到您的反馈！您可以注册源试用，在实验阶段在您的网站上启用该功能，帮助我们完善 API 设计。您还可以提交问题以提供任何反馈。