HTML-in-Canvas API 是 Web 平台的一项革命性实验特性（由 WICG 提出，并在 2026 年初进入 Chrome 开发者测试阶段）。
简短通俗介绍
过去的痛点：一直以来，Canvas 和 HTML 就像两个平行的世界。如果你想在 Canvas 游戏或可视化图表里排版一段复杂的文字，或者放一个输入框，极其困难。开发者只能被迫用 html2canvas 这种库把 DOM 截图成“死图片”，或者用 SVG 的 <foreignObject> 绕弯路。这样做不仅性能差、容易产生跨域报错（污染画布），而且丢失了按钮点击、文本选择等一切交互功能。
现在的新能力：HTML-in-Canvas API 让浏览器的渲染引擎可以直接把真实的、活的 DOM 元素（HTML+CSS）渲染到 Canvas（2D 或 WebGL）内部。
完美保真：完全支持复杂的 CSS 布局、动画和文字排版。
可交互：渲染进 Canvas 里的 HTML 按钮依然可以点击，输入框依然可以打字。
无障碍（a11y）：屏幕阅读器依然能正常读取这些元素。
核心机制三剑客：layoutsubtree 属性：加在 <canvas> 标签上，告诉浏览器“正常计算里面 HTML 子元素的布局，但不要直接显示，留给 Canvas 绘制用”。
ctx.drawElementImage()：Canvas 2D 的新方法，用于把 DOM 元素画到指定坐标。
paint 事件：当 HTML 内容改变时会触发该事件，通知 Canvas 自动重绘。
示例 Demo 代码
运行环境注意： 这是 2026 年的前沿实验性 API。你需要使用最新版的 Chrome/Edge Canary，并在浏览器地址栏输入 chrome://flags/#canvas-draw-element 开启该功能后才能看到效果。
创建一个 index.html，复制以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML in Canvas API 演示</title>
<style>
body { font-family: sans-serif; padding: 20px; background-color: #f0f0f0; }
canvas {
border: 2px dashed #999;
background: #fff;
}
/* 真实的 DOM 元素 CSS 样式 */
.my-html-card {
width: 250px;
padding: 20px;
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
color: #fff;
}
.my-html-card h2 { margin-top: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.my-html-card button {
padding: 8px 16px;
background: #fff;
color: #a18cd1;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.my-html-card button:hover { background: #f0f0f0; }
</style>
</head>
<body>
<h1>HTML-in-Canvas API 魔法演示</h1>
<!-- 1. 在 canvas 标签上声明 layoutsubtree，使其中的 DOM 被隔离供画布使用 -->
<canvas id="myCanvas" width="600" height="400" layoutsubtree>
<!-- 这里的 HTML 是真实存在于 DOM 中的，但受 layoutsubtree 影响不会直接显示在普通页面流中 -->
<div id="ui-element" class="my-html-card">
<h2>真实的 HTML 卡片</h2>
<p>这段文字、渐变背景和下面的按钮，都是通过原生 API 直接绘制到 Canvas 里的！</p>
<button onclick="alert('Canvas 里的真实 HTML 按钮被点击了！')">点击测试</button>
</div>
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const uiElement = document.getElementById('ui-element');
// 2. 监听 paint 事件（当 HTML 发生重排/重绘时，浏览器自动触发）
canvas.addEventListener('paint', () => {
// 清除之前的画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 在画布底层画一些原生 Canvas 图形作为对比
ctx.fillStyle = '#eee';
ctx.fillRect(50, 50, 200, 200);
ctx.fillStyle = '#333';
ctx.fillText('这是原生 Canvas 文字', 60, 80);
// 3. 将真实的 DOM 元素绘制到 Canvas 的 (150, 80) 坐标处
const x = 150;
const y = 80;
// drawElementImage 渲染元素，并返回一个矩阵 transform 对象
const transform = ctx.drawElementImage(uiElement, x, y);
// 将返回的 transform 应用给原元素，以确保鼠标点击的坐标可以精准映射到 Canvas 内的位置
uiElement.style.transform = transform.toString();
});
// 首次加载时请求绘制
canvas.requestPaint();
</script>
</body>
</html> 代码原理解析：
当你运行这段代码时，那个带有渐变色和悬浮效果的 HTML 卡片其实是存在于 Canvas 像素之中的。但由于我们将 ctx.drawElementImage 返回的变形矩阵赋值给了原元素的 transform，浏览器的命中测试（Hit Testing）依然能够精准捕获你在画布内进行的鼠标点击，并触发原生的 HTML onclick 事件。
网友回复
