Chrome 新 API：HTML-in-Canvas，颠覆传统 html2canvas

标签: Chrome / Canvas / HTML-in-Canvas / WebGL / 前端 / WICG / 新API
原文: 微信公众号「前端之神」https://mp.weixin.qq.com/s/exytuSiY48dCFPsg0XkAzQ
GitHub: https://github.com/WICG/html-in-canvas

核心亮点

HTML-in-Canvas —— WICG 推出的原生 Web 标准提案，让 DOM 内容直接渲染到 Canvas，保留完整交互与语义，彻底取代 html2canvas。

不是截图、不是 Hack、不是第三方库 —— 是 Chromium 原生标准 Web API。

前端渲染的长期痛点

长期以来，前端开发者面临一个核心割裂，只能二选一，没有最优方案：

方案 A：DOM + CSS

✅ 具备完善布局、文本排版、多语言、原生交互与无障碍能力
✅ 开发高效
❌ 无法接入 GPU 管线
❌ 不支持像素操控
❌ 不能用作 3D 纹理
❌ 渲染自由度极低

方案 B：Canvas / WebGL

✅ 支持像素级控制
✅ GPU 加速
✅ 支持 3D 嵌入与自定义特效
✅ 表现力拉满
❌ 无原生布局
❌ 文本需手写排版
❌ 交互与无障碍缺失
❌ 开发成本极高

传统方案的局限

以上均为临时方案，无法兼顾开发效率与渲染能力。

HTML-in-Canvas 是什么？

它不是截图、不是 Hack、不是第三方库 —— 是 Chromium 原生标准 Web API。

核心定义

DOM 完成浏览器布局、样式、语义计算，不直接页面渲染，由 Canvas 逐帧原生绘制，完整保留 HTML 原生能力，解锁 Canvas/GPU 高阶渲染自由。

三大核心原语

1. layoutsubtree —— 布局开关（基础核心）

<canvas id="myCanvas" style="width: 400px; height: 200px;" layoutsubtree>
  <!-- 普通HTML，参与布局、不直接显示 -->
  <div class="ui-card">
    <h3>HTML-in-Canvas</h3>
    <input placeholder="原生可交互输入框">
  </div>
</canvas>

作用：

• Canvas 开启该属性后，子 DOM 可正常布局、命中测试与无障碍适配
• 默认隐藏不显示（仅作为画布渲染素材）
• 生成独立堆叠上下文，实现绘制隔离

2. drawElementImage() —— 核心绘制 API

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

// 核心API：DOM一键绘制到画布
canvas.onpaint = () => {
  ctx.reset();
  const transform = ctx.drawElementImage(
    document.querySelector('.ui-card'), 
    0, 0
  );
  document.querySelector('.ui-card').style.transform = transform;
};

作用：

• 自动捕获实时渲染画面
• 返回形变矩阵，自动对齐 DOM 与画布位置
• 裁切溢出内容，精准高效

3. 帧更新 + GPU 全场景适配

// 通过 onpaint 事件与 requestPaint() 实现按需重绘
canvas.onpaint = () => {
  // 重绘逻辑
};

// 触发重绘
canvas.requestPaint();

全面适配：

• ✅ 3D 渲染管线
• ✅ WebGL 纹理转换
• ✅ WebGPU 画面拷贝
• ✅ 轻松实现 2D 网页嵌入 3D 场景

核心优势（碾压传统方案）

一句话总结：别人是仿 HTML，它是真 HTML 入画。

极简实操代码

<canvas id="myCanvas" style="width: 400px; height: 200px;" layoutsubtree>
  <!-- 普通HTML，参与布局、不直接显示 -->
  <div class="ui-card">
    <h3>HTML-in-Canvas</h3>
    <input placeholder="原生可交互输入框">
  </div>
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 核心API：DOM一键绘制到画布
  canvas.onpaint = () => {
    ctx.reset();
    const transform = ctx.drawElementImage(
      document.querySelector('.ui-card'), 
      0, 0
    );
    document.querySelector('.ui-card').style.transform = transform;
  };
</script>

兼容性 & 体验方式

当前状态

• WICG 提案阶段（Web Platform Incubator Community Group）
• Chromium 内核浏览器可体验（需开启实验开关）

体验方式

1. 使用 Chromium / Chrome / Edge（新版）
2. 访问 chrome://flags/#canvas-draw-element
3. 开启实验开关
4. 重启浏览器即可试用

落地场景

写在最后

如果你：

• 受够了 html2canvas 的静态截图、无交互、性能差
• 想用 DOM 写 UI 但又需要 Canvas/GPU 渲染能力
• 需要在 WebGL/WebGPU 场景中嵌入真实的 HTML 内容
• 关心 无障碍、屏幕阅读器 支持

HTML-in-Canvas 就是你要等的标准 API。

别人是仿 HTML，它是真 HTML 入画。

GitHub (WICG 提案): https://github.com/WICG/html-in-canvas
Keywords: HTML-in-Canvas, Canvas API, WebGL, WebGPU, Chrome 新特性, 前端渲染