HTML 渲染进 Canvas 的新提案解析（HTML-in-Canvas 教程）

HTML 渲染进 Canvas 的新提案解析（HTML-in-Canvas 教程）

SEO关键词：Canvas 渲染 HTML、drawElementImage、layoutsubtree、Canvas 新 API、HTML in Canvas 教程、WebGL 渲染 HTML、OffscreenCanvas HTML

github地址:https://github.com/WICG/html-in-canvas

一、为什么会出现 HTML-in-Canvas

在这里插入图片描述

做前端的人基本都踩过一个坑： Canvas 很强，但排版很弱。

常见痛点：

• Canvas 画文本很难做复杂排版
• 无障碍（Accessibility）几乎等于没有
• 国际化文本（复杂字体、换行、RTL）非常痛苦
• 想把 HTML 做成图片或视频导出，很麻烦
• 想把 HTML 放进 WebGL/3D 场景，只能截图 hack

Chrome 团队提出了一个新提案： HTML-in-Canvas —— 让 Canvas 直接绘制 HTML。

目前已在 Chromium 中提供实验 flag：

chrome://flags/#canvas-draw-element

二、核心思想一句话理解

在这里插入图片描述

允许把 <canvas> 的子 DOM 元素，直接绘制到 Canvas 上。

不再手写排版，不再截图 hack。 浏览器帮你把 HTML 渲染成 Canvas 图像。

三、这个提案解决了什么问题

在这里插入图片描述

1）Canvas 终于能画“真实 HTML 排版”

典型场景：

• 图表组件（legend、label）
• 富文本编辑器
• 游戏 UI
• 设计工具
• 可视化大屏

以前做法：

新方案：浏览器原生渲染 HTML → Canvas

2）无障碍能力得到修复

以前：

• Canvas fallback 内容经常不一致
• 屏幕阅读器读不到真实内容

现在：

• Canvas 中绘制的 HTML 与 DOM 同步
• 可访问性与真实 DOM 一致

3）HTML 可以进入 WebGL / WebGPU

这是游戏开发最兴奋的点。

现在可以：

• 把 HTML 作为 WebGL 纹理
• 把网页贴到 3D 物体上

例如：

• 3D 仪表盘
• 3D UI 面板
• WebXR UI

4）HTML 导出为图片 / 视频

典型需求：

• 海报生成
• 分享卡片
• 视频帧导出

以前依赖截图库，现在变成原生 API。

四、三个核心 API

这是重点。

1️⃣ layoutsubtree 属性

<canvas layoutsubtree>
  <div>这里的 HTML 不会直接显示</div>
</canvas>

作用：

• 让 Canvas 子元素参与布局
• 但不会直接渲染到页面
• 只有调用 API 才会画进 Canvas

理解成：

DOM 变成“离屏 HTML 图层”。

2️⃣ drawElementImage()

核心方法。

ctx.drawElementImage(element, x, y)

作用：

• 把 HTML 元素画到 Canvas
• 返回一个 transform，用于同步 DOM 位置

关键规则：

• 必须是 canvas 的直接子元素
• 必须可见（不能 display:none）
• CSS transform 不参与绘制
• 超出元素边界会被裁剪

3️⃣ paint 事件（重点）

新增事件：

canvas.onpaint = () => {}

触发时机：

• 当 Canvas 子元素发生变化时
• 在浏览器渲染周期中触发

类似：

还新增：

canvas.requestPaint()

强制触发一次 paint。

五、最小可运行 Demo

这是官方基础示例。

HTML

<canvas id="canvas" style="width:400px;height:200px" layoutsubtree>
  <form id="form_element">
    <label>name:</label>
    <input />
  </form>
</canvas>

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.onpaint = () => {
  ctx.reset();

  // 把 HTML 画进 Canvas
  const transform = ctx.drawElementImage(form_element, 100, 0);

  // 同步 DOM 位置（重要）
  form_element.style.transform = transform.toString();
};

// 防止模糊
new ResizeObserver(([entry]) => {
  canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
  canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
}).observe(canvas, {box:'device-pixel-content-box'});

效果： 一个真正可输入的 <input> 被绘制进 Canvas。

六、Worker + OffscreenCanvas（性能大杀器）

支持在 Worker 渲染。

关键 API：

canvas.captureElementImage(element)

流程：

1. 主线程捕获 HTML 快照
2. 传给 Worker
3. Worker 在 OffscreenCanvas 绘制

这意味着：

• 大型 UI 可在 Worker 渲染
• 主线程不卡顿
• 适合可视化/游戏

七、WebGL / WebGPU 支持

新增 API：

WebGL

gl.texElementImage2D(...)

WebGPU

queue.copyElementImageToTexture(...)

直接把 HTML 当纹理使用。

典型应用：

• 3D 网站
• WebXR
• 游戏 HUD
• three.js UI

八、安全与隐私限制

不会泄露敏感信息：

不会绘制：

• 跨域 iframe/img
• 已访问链接样式
• 自动填充内容
• 拼写检查标记
• 系统主题信息

浏览器会自动过滤。

九、这项技术的真正意义

这不是一个小 API，而是渲染模型升级。

未来可能出现的新架构：

本质上：

HTML 成为 GPU 渲染管线的一部分。

十、当前状态

• 属于 Explainer 提案
• Chromium 已有实验实现
• 可在 Chrome Canary 体验

未来可能成为标准。

十一、总结

HTML-in-Canvas 带来的改变：

• Canvas 终于拥有完整排版能力
• HTML 可进入 3D / GPU 渲染世界
• Worker 渲染 HTML 成为可能
• 截图类库可能逐步淘汰

这项能力一旦稳定，会对以下领域产生影响：

• 图表库
• 游戏引擎
• WebXR
• 可视化
• 设计工具

属于 Web 渲染体系的一次重要升级。