HTML-in-Canvas：让 Canvas 完美渲染 HTML 的 Web 新标准

一、为什么需要这个提案当前的痛点长期以来canvas和 HTML 是 Web 开发中的两个平行世界Canvas 的局限性文本渲染能力弱没有原生的 CSS 排版支持无法直接使用 CSS 动画和过渡效果Accessibility无障碍访问支持差复杂图表如图例、坐标轴开发成本高开发者的困境游戏开发者想在 Canvas 里渲染精美的 UI 菜单3D 场景里需要嵌入富文本标签图表组件需要高质量的文本渲染这些问题过去只能靠 workaround 解决体验差强人意。HTML-in-Canvas 的愿景WICG 提出的这个提案旨在打破 Canvas 和 DOM 之间的壁垒让HTML元素可以直接渲染到 Canvas 画布上同时保留 CSS 的全部能力和 DOM 的交互性。二、核心 API 设计1. layoutsubtree属性 — 开启新世界的大门canvas idmyCanvas layoutsubtree width800 height600 !-- 这些子元素可以被渲染到 Canvas 上 -- div idui-panel h2游戏菜单/h2 button开始游戏/button /div /canvaslayoutsubtree 的作用允许 Canvas 的直接子元素参与布局layout创建新的堆叠上下文stacking context成为所有后代元素的包含块启用命中测试hit testing2.drawElementImage()— 绘制 HTML 到 Canvasconst canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); canvas.onpaint () { // 清除画布 ctx.reset(); // 绘制 HTML 元素到 Canvas ctx.rotate((15 * Math.PI) / 180); // 旋转 let transform ctx.drawElementImage(ui_panel, 100, 50); // 同步 DOM 位置以保持可访问性 ui_panel.style.transform transform.toString(); }; // 触发首次绘制 canvas.requestPaint();API签名// 基本用法绘制到指定位置 ctx.drawElementImage(element, x, y); // 指定目标尺寸可缩放 ctx.drawElementImage(element, x, y, width, height); // 源区域 目标区域裁剪缩放 ctx.drawElementImage(element, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);3.paint事件 — 自动响应变化canvas.onpaint (event) { // 当任何子元素渲染可能改变时触发 // event.changedElements 包含变化了的元素列表 ctx.reset(); ctx.drawElementImage(element, 0, 0); }; // 支持 ResizeObserver 同步尺寸 const observer new ResizeObserver(([entry]) { canvas.width entry.devicePixelContentBoxSize[0].inlineSize; canvas.height entry.devicePixelBoxSize[0].blockSize; }); observer.observe(canvas, { box: device-pixel-content-box });4. WebGL /WebGPU 支持// WebGL 中绘制 HTML 到纹理 const gl canvas.getContext(webgl); gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.UNSIGNED_BYTE, htmlElement); // WebGPU 中复制 HTML 到纹理 const queue device.queue; queue.copyElementImageToTexture(source, destination);三、实际应用场景场景 1复杂文本渲染图表标签canvas idchart width638 height318 layoutsubtree div idlabel stylewidth: 550px; Hello from HTML-in-Canvas! brMulti-line, bformatted/b, rotated text with emoji brRTL support: span dirrtl /span brVertical text: p stylewriting-mode: vertical-rl;垂直文本/p brInline SVG: svg.../svg /div /canvas效果支持多语言、排版格式、SVG、内联图片 — 这些用 Canvas API 几乎不可能实现场景 2游戏 UI 菜单canvas idgame layoutsubtree div idmenu h1 星际飞船控制面板/h1 label飞船名称input typetext valueCanvas Voyager/label input typecheckbox idhyperdrive checked label forhyperdrive启动超光速引擎/label input typerange idshield min0 max100 value75 button typesubmit发射/button /div /canvas效果完整的表单交互输入框、复选框、滑动条可以渲染到 Canvas 中场景 33D 场景中的 HTML 标签结合Three.js可以在 3D 立方体上渲染 HTML 内容// Three.js 中使用 HTML 纹理 const texture new THREE.CanvasTexture(htmlCanvas); const material new THREE.MeshBasicMaterial({ map: texture }); const cube new THREE.Mesh(geometry, material);四、隐私安全保护这个提案非常重视隐私安全绘制时会自动过滤敏感信息 被过滤的敏感信息❌ 跨域内容iframe、图片 URL、clip-path 等❌ 系统颜色和主题偏好❌ 拼写检查标记❌ 访问过的链接样式❌ 表单自动填充数据❌ 子像素抗锯齿渲染✅ 允许的信息页面滚动条样式表单元素外观搜索标记find-in-page五、如何体验 启用开发者试验使用 Chrome Canary 138.0.7175.0 及以上版本访问chrome://flags/#canvas-draw-element启用该功能重启浏览器六、技术细节坐标系转换drawElementImage返回的变换矩阵用于同步 DOM 位置// 计算公式 T_origin^(-1) · S_css→grid^(-1) · T_draw · S_css→grid · T_origin // 使用方式 let transform ctx.drawElementImage(element, x, y); element.style.transform transform.toString();OffscreenCanvas 支持可以在 Worker 线程中绘制提高性能// 主线程捕获元素为快照 canvas.onpaint (event) { const elementImage canvas.captureElementImage(formElement); worker.postMessage({ elementImage }, [elementImage]); }; // Worker 线程在离屏 Canvas 中绘制 self.onmessage (e) { if (e.data.elementImage) { ctx.drawElementImage(e.data.elementImage, 100, 0); } };七、现状与展望已实现Canvas 2DdrawElementImage()layoutsubtree属性paint事件captureElementImage()支持 OffscreenCanvasWebGLtexElementImage2D()进行中WebGPUcopyElementImageToTexture()更多的边界情况处理当前限制跨域 iframe 暂不支持需要开启实验性标志交互元素需要手动同步位置八、总结HTML-in-Canvas 是 Web 平台的一次重要进化能力以前现在Canvas 文本简陋的 fillText完整的 CSS 排版游戏 UICanvas 自绘直接用 HTML/CSS3D HTML贴图方案原生支持无障碍访问难以保证一致性自动同步性能主线程渲染支持 Worker这个提案的出现意味着 Web 开发者可以在 Canvas 的高性能绘图能力和 HTML 的丰富表达能力之间自由切换再也不用做痛苦的权衡。