41 lines
1.2 KiB
Markdown
41 lines
1.2 KiB
Markdown
# Demo 7：HTML-in-Canvas
|
||
|
||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||
|
||
<div class="card-blue">
|
||
<div class="font-semibold mb-3">官方能力</div>
|
||
<div class="space-y-2 text-sm">
|
||
|
||
- 把真实 DOM 绘制进 Canvas / WebGL / WebGPU 场景
|
||
- 保留可访问性、搜索、翻译等浏览器能力
|
||
- 当前是 origin trial，环境要求高
|
||
- 现场必须准备 fallback
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-green">
|
||
<div class="font-semibold mb-3">本地演示</div>
|
||
<div class="space-y-2 text-sm">
|
||
|
||
- 打开 <span class="font-mono">/html-in-canvas/index.html</span>
|
||
- 支持时调用 <span class="font-mono">drawElementImage()</span>
|
||
- 不支持时显示同一 DOM 表单的 fallback 预览
|
||
- 讲清楚“DOM 进入画布”而不是“canvas 手绘控件”
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="mt-8 card-amber text-sm">
|
||
运行条件：Chrome Canary 149+，开启 <span class="font-mono">chrome://flags/#canvas-draw-element</span>；Chrome 官方说明该 API 在 Chrome 148-150 处于 origin trial。
|
||
</div>
|
||
|
||
<!--
|
||
官方依据：
|
||
- https://developer.chrome.com/blog/html-in-canvas-origin-trial
|
||
|
||
不要承诺现场一定能跑原生 API。演示核心是 API 方向和浏览器支持边界。
|
||
-->
|