HTML-in-Canvas 新特性探索

第 1 步 声明          第 2 步 绘制             第 3 步 同步
<canvas layoutsubtree>  canvas.onpaint = () => {    form.style.transform =
  <form id="form">        t = ctx.drawElementImage(    t.toString();
    ...                   form, 0, 0);               // 命中测试/无障碍
  </form>                 }
</canvas>

<canvas id="canvas" style="width:400px; height:200px;" layoutsubtree>
  <form id="form_element">
    <label for="name">姓名：</label>
    <input id="name" type="text">
  </form>
</canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  canvas.onpaint = () => {
    ctx.reset();
    // 把 HTML 画进 Canvas，并拿到同步矩阵
    const transform = ctx.drawElementImage(form_element, 0, 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' });

  canvas.requestPaint(); // 首帧触发
</script>

canvas.onpaint = (e) => {
  ctx.reset();
  ctx.save();
  ctx.translate(200, 100);
  ctx.rotate(theta);            // 画布 CTM 参与绘制，CSS transform 不参与
  const t = ctx.drawElementImage(el, -el.offsetWidth / 2, -el.offsetHeight / 2);
  el.style.transform = t.toString();
  ctx.restore();
  theta += 0.01;
  canvas.requestPaint();        // 链式触发下一帧
};
canvas.requestPaint();          // 启动

const gl = canvas.getContext('webgl');
const tex = gl.createTexture();

canvas.onpaint = () => {
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, form_element);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
};

canvas.onpaint = () => {
  device.queue.copyElementImageToTexture(element, { texture: gpuTexture });
};

// 主线程
canvas.onpaint = () => {
  const img = canvas.captureElementImage(form_element);   // 快照
  worker.postMessage({ elementImage: img }, [img]);        // 转移到 Worker
};
worker.onmessage = ({ data }) => {
  form_element.style.transform = data.transform.toString(); // 同步回 DOM
};

// Worker 内
self.onmessage = (e) => {
  if (e.data.elementImage) {
    octx.reset();
    const t = octx.drawElementImage(e.data.elementImage, 100, 0);
    self.postMessage({ transform: t });
  }
};

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement);   // 传入 DOM 元素
const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
scene.add(mesh);

const nativeSupported = typeof HTMLCanvasElement.prototype.drawElementImage === 'function'
  || typeof WebGLRenderingContext.prototype.texElementImage2D === 'function';

<script type="importmap">
{ "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
    "three-html-render/polyfill": "https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.mjs",
    "three-html-render/renderer": "https://cdn.jsdelivr.net/npm/three-html-render/dist/renderer.js"
}}
</script>
<script type="module">
  import { installHtmlInCanvasPolyfill } from 'three-html-render/polyfill';
  import { ThreeHTMLRenderer } from 'three-html-render/renderer';
  installHtmlInCanvasPolyfill();           // 原生可用则自动走原生

  const htmlRenderer = new ThreeHTMLRenderer();
  htmlRenderer.connect(canvas, camera, threeRenderer);
  htmlRenderer.addObject(document.getElementById('ui'), mesh);
  // 每帧 htmlRenderer.update() —— 纹理上传 + DOM 覆盖层定位 + 事件分发全自动
</script>

重力 -9.81 · 固定物理步长 1/120 · 阻尼 pulling ? 0.985 : 0.9948

物理：约束 Verlet 钟摆
  位置差即速度（position - previous）
  拖拽 = 在指针方向上施加无形的弹簧力
  每帧把绳索长度约束回 ropeLength（anchor 固定于天花板）

交互矩阵：
  左键拖拽    承灯摇摆 + 惯性释放（松手保留动量）
  右键拖拽    横向调整光束角度（16°–58°）
  右键单击    循环切换 5 种预设灯光颜色
  双击        重置灯光与摆动

HTMLCanvasElement
  ├─ layoutsubtree 属性          子元素参与布局/命中测试
  ├─ onpaint / PaintEvent        changedElements: FrozenArray<Element>
  ├─ requestPaint()              强制下一帧触发 paint
  ├─ captureElementImage(el)     → ElementImage（Transferable）
  └─ getElementTransform(el, T)  → DOMMatrix（3D 场景同步用）

CanvasRenderingContext2D / OffscreenCanvasRenderingContext2D
  └─ drawElementImage(el, dx, dy [, dw, dh] / [sx..dh])   → DOMMatrix

WebGLRenderingContext
  └─ texElementImage2D(target, level, internalformat, format, type, element)

GPUQueue
  └─ copyElementImageToTexture(source, destination)

ElementImage  (Window + Worker, Transferable)
  ├─ width / height
  └─ close()