本字幕由TME AI技术生成
欢迎来到猿来如此
我是张鹤
今天聊一个google io 两千零二十六上很容易被低估的新web 平台特性
它叫html in canvas
很多人第一眼看到这个名字
第一反应是
哦
Canvas 终于能塞html 了
这理解不能说错
但太浅了
Html in canvas 真正重要的地方不是canvas 里能不能放一个div
它动的是前端一条存在了很多年的边界
Farm 负责语义交互和浏览器能力
Canvas web 纪要外
Bgpu 负责像素图形和gpu 管线
过去这两套世界像两个国家
边境线画的很硬
你要domm 的复制
查找 翻译 表单
无障碍和dave tools 就老老实实待在domm 里鸟shader 三维游戏
复杂画布和视觉控制就进canvas
但进去以后
很多浏览器能力要自己重造或者直接放弃
Html in canvas 的变化是什么
浏览器开始给这两个国家修桥
它不是让canvas 变成domm
也不是让dom 消失
更准确的说
它让真实dom 成为图形管线的一种输入
按chrome 官方介绍
Html in canvas 是一个实验性api
目前已经进入origin trial
它允许你把dom 内容绘制进二维canvas
或者作为web gl 和web gpu 的texture 使用
同时它尽量保留交互可访问性
页面查找
浏览器翻译和dive tools 这些能力
人话版就是你可以写一个真实html 组件
比如表单
副文本
设置面板
复杂卡片
它不是截图
不是手挫像素
也不是第三方库猜css 怎么画
它仍然是doom
然后你可以把这个domm 的渲染结果画进canvas
甚至贴到一个三维物体表面上
更关键的是
它还是活的
文本可以被选中
内容可以被复制
页面查找能找到
屏幕阅读器能读
浏览器翻译能处理
Devil tooth 能检查
以前很多canvas 应用最尴尬的地方就在这里
画面看起来很高级
但对浏览器来说经常只是一张大图
用户看到的是文字
浏览器看到的是像素
用户以为这是界面辅助技术
可能只看到一块空白
这就像你开了一家装修很豪华的店
但门口没有门牌
导盲系统也进不去
普通人看着炫
真到基础能力上全是坑
Html in canvas 要补的就是这个坑
他怎么工作
核心可以拆成几步
第一
在canvice 上加layout subtree
这一步是告诉浏览器
Canvice 里面的子元素要参与布局和命中测试
他们仍然是真实盗墓
只是不会自动显示
第二
用draw element image 把dorm 划进二维canvas
比如你有一个dv
里面有文本按钮
输入框和css 样式
你在paint event 里调用draw element image
浏览器就会把这个元素的渲染结果画到canvas 上
第三
如果你在web jl 里
可以用text element image 二d
如果你在web gpu 里
可以用copy element image to texture
也就是说
Html 可以成为texture
Texture 意味着它可以贴到三维物体上
可以进shader
可以做后处理
可以成为沉浸式场景的一部分
第四
要同步transform
这一步最容易被忽略
但非常关键
你看到的html 已经划进canvas 了
但真实dom 必须知道自己在屏幕哪里
不然用户点画面上的按钮
浏览器不知道该把事件交给谁
However 会错
Focus 会错
屏幕阅读器也会错
所以这不是截图
截图不会有焦点
截图不会有输入
截图不会有页面查找截图不会有无障碍数
Html in canvas 玩的是活的洞
那它和html two canvas 有什么区别
Html two canvas 的思路是遍历dom
读取属性
然后自己构建一个页面表示
再画到canvas
它能画对多少
取决于它理解多少css 和布局细节
这就像照着网页临摹一幅画
画的再像也是临摹
Html in canvas 更像浏览器自己把真实ht ml 渲染结果交给你当素材
不是酷在猜浏览器
是浏览器自己开放能力
它带来的第一个变化是canvas 应用不用再那么装瞎
以前canvas 应用经常是用户看得到
浏览器看不懂
你画了图表
白板
设计工具
复杂文档
用户看得清清楚楚
但浏览器不一定知道那是什么
Html in canvas 让真实dom 可以继续存在于语义系统里
同时又能被划进canvas
这对设计工具
白板
图表工具
文档编辑器很重要
你以为它只是省几行代码
不是
这是把可访问性和浏览器能力从补丁变回地基
第二个变化是三维和web xr 能吃上真实web ui
做过three gs 的人都知道
三维里的ui 很折磨
按钮自己画
输入框自己写
布局自己算
事件自己recst
写着写着
你不是在做产品
你是在复刻浏览器
现在three gs 已经有h tm l texture play canvas 也开始支持html in canvas
这说明生态已经开始接线
以后你可以用html 和css 写ui
再把它作为texture 放进三维场景
不是盖在上面
是真的进入画面里
第三个变化是ai agent 更容易读懂视觉应用
这个点很多人会忽略
如果一个按钮只是canvas 上的一块蓝色矩形
Agent 要理解它只能靠截图
Ocr 和坐标推断
能做 但很脆
如果它背后仍然是dom
有真实文本
真实input
真实roll
真实可访问性信息agent 操作
它就稳定的多
很多人以为ai 时代的ui 会变成一堆炫酷画面
但真相是ai 时代更需要结构化ui
没有结构
Agent 就只能猜
猜的越多系统越不可靠
不过这里要泼一盆冷水
Html in canvas 现在还很早
Chrome 一百四十八到一百五十是origin trial
本地测试需要chrome cannary
还要打开canvas draw element 这个flag
Wake explainer 还在更新tag
Mozilla web kit 的讨论也没完全收束
所以别看demo 很炸
就开始喊前端未来以来马上重构所有项目
第一
浏览器兼容是现实问题
第二
性能不是白送的
第三
安全和隐私有限制
第四
三维transform 和命中测试依然是工程活
门开了不等于路铺好了
我真正看中的不是html in canvas 这个api 名字
而是它背后的方向
浏览器正在承认web app 已经不是传统文档页面了
现在的web 有设计工具
视频编辑器
三维展厅
Ai coding ide
白板游戏coding 操作界面
它们既需要dom 的语义和浏览器能力
也需要gpu 的图形能力
以前你的选择是要dom 还是要canvas
以后可能变成哪一层用dom
哪一层进canvas
哪一层交给gpu
哪一层保留给浏览器和ai agent
这就是从选阵营变成做架构
说白了
Html in canvas 不是终点
它只是告诉你
Web ui 的墙已经开始松了
墙一松
新的东西就会长出来
这期原来如此
就聊到这里
我是张鹤
如果你做三维游戏白板设计工具
可视化或者ai 可操作界面
可以开始关注这个api
别急着上生产
但一定要看懂它背后的信号
我们下期见
