使用指南
HTML-in-Canvas
将实时 HTML 渲染为 WebGL 纹理——对任何 DOM 内容使用 GPU 着色器、3D 几何体和电影效果。
HTML-in-Canvas API（drawElementImage）让你以 GPU 速度将实时渲染的 DOM 元素直接捕获到 canvas 中。这意味着你可以获取任何 HTML——仪表板、表单、落地页、应用 UI——并在 WebGL 场景中将它们渲染为纹理，使用着色器、3D 变换和后处理效果。
⚠️ Warning
需要 Chrome 标志。
drawElementImageAPI 是实验性的，必须手动启用：
- 在 Chrome 或 Brave 中打开
chrome://flags/#canvas-draw-element- 将 CanvasDrawElement 设置为 Enabled
- 重启浏览器
HyperFrames 在渲染期间自动启用此标志（
--enable-features=CanvasDrawElement），因此渲染后的视频无需手动设置即可工作。该标志仅在 Studio 中的实时预览时需要。
工作原理
- 将 HTML 内容放在
<canvas layoutsubtree>元素内 - 浏览器将 HTML 子元素作为普通 DOM 渲染
- 调用
ctx.drawElementImage(element, x, y, w, h)将渲染的像素捕获到 canvas 中 - 将 canvas 用作 Three.js 纹理，应用着色器，映射到 3D 几何体
<!-- 1. HTML 内容位于 canvas 内 -->
<canvas id="capture" layoutsubtree width="1920" height="1080">
<div class="my-dashboard">
<h1>Revenue: $4.2M</h1>
<div class="chart">...</div>
</div>
</canvas>
<!-- 2. 用于 3D 渲染的 WebGL canvas -->
<canvas id="theater" width="1920" height="1080"></canvas>
// 3. 将 HTML 捕获到 canvas
var capCanvas = document.getElementById("capture");
var ctx = capCanvas.getContext("2d");
ctx.drawElementImage(capCanvas.querySelector(".my-dashboard"), 0, 0, 1920, 1080);
// 4. 用作 Three.js 纹理
var texture = new THREE.CanvasTexture(capCanvas);
var material = new THREE.MeshBasicMaterial({ map: texture });
与其他方案的区别
传统方法如 html2canvas 在 JavaScript 中重新解析和重新渲染 DOM——它们速度慢、有损，且遗漏 CSS 特性如 backdrop-filter、复杂阴影和 Web 字体。drawElementImage API 使用浏览器自己的合成器，因此：
- 像素完美 — 每个 CSS 特性都受支持，因为浏览器原生渲染它
- GPU 加速 — 以 60fps 捕获，足够快以实现实时动画
- 实时内容 — HTML 可以在捕获之间进行动画、滚动和变化
- 同时多次捕获 — 无嵌套限制，多个
<canvas layoutsubtree>元素可以在同一合成中捕获不同内容
特性检测
使用 API 前始终进行特性检测。合成应该为未启用该标志的浏览器提供优雅降级。
function isSupported() {
var tc = document.createElement("canvas");
if (!("layoutSubtree" in tc)) return false;
c.setAttribute("layoutsubtree", "");
var ctx = tc.getContext("2d");
return ctx && typeof ctx.drawElementImage === "function";
}
if (isSupported()) {
ctx.drawElementImage(element, 0, 0, w, h);
} else {
// 降级：直接在 canvas 上绘制文本、使用静态图片等
}
每帧重新捕获
对于动画内容（滚动、过渡、计数器），在渲染循环内调用 drawElementImage 以每帧更新纹理：
function render() {
// 更新 HTML 状态
scrollContainer.style.transform = "translateY(-" + scrollOffset + "px)";
counterEl.textContent = Math.round(currentValue);
// 重新捕获
ctx.clearRect(0, 0, W, H);
ctx.drawElementImage(htmlElement, 0, 0, W, H);
exture.needsUpdate = true;
// 使用更新的纹理渲染 3D 场景
renderer.render(scene, camera);
}
目录 blocks
一次安装所有 HTML-in-Canvas blocks：
npx hyperframes add html-in-canvas
或单独安装：
| Block | 描述 | 安装 |
|---|---|---|
| iOS 26 Liquid Glass 主屏幕 | 带有实时 Liquid Glass 通知和小组件的 iPhone 主屏幕 | npx hyperframes add ios26-liquid-glass |
| macOS Tahoe Liquid Glass 桌面 | 带有液态玻璃窗口、Dock 和通知的 MacBook 桌面 | npx hyperframes add macos-tahoe-liquid-glass |
| Liquid Glass 通知 | 具有原生感的玻璃通知堆栈，带进度和回复状态 | npx hyperframes add liquid-glass-notification |
| iPhone & MacBook | 带有实时 HTML 屏幕的真实 3D GLTF 设备 | npx hyperframes add vfx-iphone-device |
| Text Cursor | 带有色彩阴影的戏剧性文本揭示 | npx hyperframes add vfx-text-cursor |
| Portal | 带有体积光的维度突破 | npx hyperframes add vfx-portal |
| Shatter | HTML 碎裂成玻璃碎片 | npx hyperframes add vfx-shatter |
| Magnetic | 磁场粒子可视化 | npx hyperframes add vfx-magnetic |
| Liquid Background | 有机液体模拟 | npx hyperframes add vfx-liquid-background |
渲染
HyperFrames 在渲染期间自动启用 Chrome 标志。无需特殊配置：
npx hyperframes render --output my-video.mp4
对于 Docker 渲染，该标志也会在容器内自动启用。