HTML in Canvas · Scene 01
DOM meets GPU
点击标题触发粒子爆炸 · 移动鼠标感受场
HTML in Canvas · Scene 02

玻璃质感 · 折射 · 后处理

鼠标悬停卡片，Canvas 实时绘制光晕和粒子场。真实 DOM 内容与图形特效层叠合流。

⚡
粒子化 Reveal
文字和 UI 元素以粒子形态从场景中凝聚或消散，彻底打破"静态截图贴图"局限。
PARTICLES
🌊
弯曲表面 UI
HTML 表单贴合在弯曲的 3D 曲面上，保留完整交互，鼠标和键盘事件正常路由。
3D SURFACE
🏠
3D 空间内嵌网页
虚拟房间里的显示器渲染真实的 live web 内容，透视和光影与场景完全吻合。
IMMERSIVE
HTML in Canvas · Scene 03

弯曲表面渲染

Canvas 实时变换模拟界面贴合在圆柱曲面上，拖动感受 3D 透视。

HTML in Canvas · Scene 04

防爬虫动态界面

开启扭曲后，表单持续施加非线性变换——真人仍可识别操作，脚本无法稳定定位元素。

HTML in Canvas · Scene 05

原生 API 预览

Chrome Canary 实验性 API，开启 chrome://flags/#canvas-draw-element 后可用。

⚠️
实验性 API — 目前仅在 Chrome Canary 中通过 flag 开启，尚未标准化。 本页其他效果均使用当前可用技术模拟，原生 drawElementImage() 代码仅供前瞻参考。 标准化进展可跟踪 WICG/html-in-canvas 提案。
HTML 
<!-- layoutsubtree 让子元素参与布局 -->
<canvas layoutsubtree
  id="myCanvas"
  width="800" height="600">

  <!-- 真实 DOM 子元素 -->
  <div id="ui-card" class="card">
    <h2>Live HTML</h2>
    <input type="text"
      placeholder="可交互输入框"/>
    <button>按钮</button>
  </div>

</canvas>
JavaScript 
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const card = document.getElementById('ui-card');

// paint 事件: DOM 变化时触发
canvas.addEventListener('paint', (e) => {
  ctx.clearRect(0, 0, 800, 600);

  // 应用 WebGL 级别的变换
  ctx.save();
  ctx.transform(...cylinderMatrix);

  // 直接把真实 DOM 画进 canvas!
  ctx.drawElementImage(card, 0, 0);

  ctx.restore();

  // 叠加 shader 后处理
  applyGlassRefraction(ctx);
});