谷歌推出 HTML-in-Canvas API 源试验

谷歌已在 Chrome 浏览器中启动 HTML-in-Canvas API 的源试验，使网络开发者能够在 2D 画布或 WebGL/WebGPU 纹理中直接绘制 DOM 内容1。这一新 API 同时保持了用户界面的交互性和可访问性1，旨在解决开发者在 DOM 语义功能与 Canvas 低级图形性能之间的权衡问题1。

该源试验目前在 Chrome 148 至 150 版本中提供1。开发者可在 Chrome Canary 149 或更高版本中通过 chrome://flags/#canvas-draw-element 标志启用此 API1。该 API 支持的功能包括文本布局、表单控制、文本选择与复制粘贴、可访问性特性、页面内查找、浏览器扩展集成以及开发者工具集成1。出于安全和隐私考虑，API 对跨源 iframe 内容施加了限制1。

Three.js 和 PlayCanvas 等流行框架已提供支持1。Three.js 通过新的 THREE.HTMLTexture 提供了实验性支持，PlayCanvas 则通过其纹理 API 提供支持1。该 API 的主要应用场景包括大型 Canvas 应用、3D 场景和游戏、营销网站以及 WebXR 体验1。

Google has introduced an origin trial for the HTML-in-Canvas API, enabling web developers to render DOM content directly onto 2D canvases or WebGL/WebGPU textures while preserving UI interactivity and accessibility features 1. The API addresses a longstanding trade-off developers faced between leveraging the semantic capabilities of the DOM and accessing Canvas's low-level graphics performance 1.

The origin trial is currently available in Chrome versions 148 through 150, with developers able to enable the feature in Chrome Canary 149 or later via the chrome://flags/#canvas-draw-element flag 1. The API supports a comprehensive set of capabilities including text layout, form controls, text selection and clipboard operations, accessibility features, in-page search functionality, extension integration, and DevTools integration 1. Popular frameworks have already begun implementing support, with Three.js offering experimental functionality through a new THREE.HTMLTexture class and PlayCanvas providing support via its texture API 1.

The API includes cross-origin content restrictions, prohibiting the rendering of cross-origin iframe content for security and privacy reasons 1. Primary use cases identified for the technology span large Canvas applications, 3D scenes and games, marketing websites, and WebXR experiences 1.