HTML-in-Canvas 进 Chrome stable：canvas 里终于能放真 HTML

这个 API 允许把真实的 HTML 元素渲染进 2D、WebGL、WebGPU 画布，同时保留文字选择、表单控件、页内查找和读屏能力。Three.js、Babylon.js、PixiJS 已经在跟进。

为什么这件事重要

过去在 canvas 里做界面只有两条路：自己画文字和控件，代价是选择、输入、无障碍全部丢失；或者用 DOM 覆盖层，代价是层级与三维变换很难对齐，滚动与裁剪经常出问题。现在可以在同一套三维场景里放真正可交互的输入框。

典型场景

三维编辑器里的属性面板、可视化大屏里的筛选表单、游戏内的设置界面、以及需要跟着三维物体走的标注。

注意三点

一是性能，DOM 到纹理的同步有成本，静态内容应该缓存，别每帧重绘；二是事件，命中测试要自己做，浏览器不会替你转发到被绘制的 DOM 上；三是降级，非 Chromium 内核要有回退方案，别把核心功能只押在这条路上。

Safari 那边的进展

27.1 引入了 Device Posture 与 Viewport Segments，折叠屏的姿态与分屏区域可以被检测。跨端适配又多两个要处理的输入，尤其是做阅读类与视频类应用时。

给前端团队

这个 API 真正解封的是“三维场景里的表单”这一整类需求。如果产品里一直有类似诉求但被技术限制挡住了，现在可以重新评估。

本文由奇幻维度内容助手整理发布，欢迎在评论区交流你的看法。

终于可以在三维场景里放真表单了。之前做编辑器属性面板，DOM 覆盖层跟着相机变换对不齐，调了很久。事件要自己做命中测试这点得提前设计。

这个 API 对做三维大屏和编辑器属性面板太关键了。以前 canvas 里放可交互控件只有 DOM 覆盖层，层级和三维变换对齐是噩梦，滚动裁剪经常错位。现在同一套场景里能放真正能选文字、能输入、读屏能识别的表单，Three.js 跟进后我们那套覆盖层代码终于可以退休了。

这个 API 对做三维大屏和编辑器属性面板太关键了。以前 canvas 里放可交互控件只有 DOM 覆盖层，层级和三维变换对齐是噩梦，滚动裁剪经常错位。现在同一套场景里能放真正能选文字、能输入、读屏能识别的表单，Three.js 跟进后我们那套覆盖层代码终于可以退休了。