多年来,网页开发者在构建高度交互的视觉应用时面临一个艰难的选择:依赖 DOM 所提供的丰富语义功能,还是渲染到 <canvas> 元素以获得底层图形性能。现已进入源启试验阶段的全新实验性 HTML-in-Canvas API 消除了这种取舍。它允许开发者将 DOM 内容直接绘制到 2D 画布或 WebGL/WebGPU 纹理中,同时保持界面的交互性、可访问性,并与浏览器功能保持连接。
DOM 是网页界面的基础。它提供内置的文本排版和可被语义理解的内容,并支持日常操作,例如选中文本进行复制或右键点击图片进行保存。它还与无障碍工具、翻译、页内查找、阅读模式、扩展程序、深色模式、浏览器缩放和自动填充功能集成。画布(包括 WebGL 和 WebGPU)则提供底层像素访问能力,用于高级 2D 和 3D 图形,游戏以及 Google Docs 和 Figma 等复杂应用都依赖于此。然而,由于画布是由像素网格构成的,画布内的界面会丧失这些浏览器集成功能,且通常需要大量定制逻辑。
HTML-in-Canvas API 弥合了这一差距。通过将 HTML 放置在 <canvas> 元素内并同步其变换,开发者可以获得简化的文本排版、表现力丰富的表单控件、原生文本选择和上下文菜单、无障碍树暴露、页内查找支持、供爬虫和 AI 代理索引的能力、扩展程序兼容性以及 Chrome DevTools 检查功能。其应用场景包括基于大型画布的应用、3D 场景和网页游戏,以及需要真实交互式 DOM 界面的沉浸式 WebXR 体验。
来源: Hacker News · 由HeadlinesBriefing整理摘要