116 lines
4.8 KiB
HTML
116 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>HTML-in-Canvas API Demo</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="page-shell">
|
|
<section class="intro" aria-labelledby="page-title">
|
|
<p class="eyebrow">Chrome Origin Trial Demo</p>
|
|
<h1 id="page-title">HTML-in-Canvas API</h1>
|
|
<p class="lede">
|
|
这个页面基于 WICG 官方示例改写，演示把真实 DOM 表单绘制进
|
|
<code><canvas></code>，同时保留输入、选择、滑块和按钮的交互能力。
|
|
</p>
|
|
|
|
<div class="status-panel" id="support-status" role="status">
|
|
正在检测当前浏览器是否支持实验 API...
|
|
</div>
|
|
</section>
|
|
|
|
<section class="demo-grid" aria-label="HTML-in-Canvas 演示">
|
|
<div class="canvas-stage">
|
|
<canvas id="canvas" width="638" height="318" layoutsubtree="true">
|
|
<div id="draw-element" class="control-panel">
|
|
<form id="demo-form" action="#" method="get">
|
|
<fieldset>
|
|
<legend>飞船控制台</legend>
|
|
<label class="field-row" for="ship-name">
|
|
<span>飞船名称</span>
|
|
<input type="text" id="ship-name" value="Canvas 远航者" />
|
|
</label>
|
|
|
|
<label class="check-row" for="hyperdrive">
|
|
<input type="checkbox" id="hyperdrive" checked />
|
|
<span>启动超空间引擎</span>
|
|
</label>
|
|
|
|
<fieldset class="nested-fieldset">
|
|
<legend>目标星系</legend>
|
|
<label class="check-row" for="alpha">
|
|
<input type="radio" id="alpha" name="system" value="alpha" checked />
|
|
<span>半人马座 Alpha</span>
|
|
</label>
|
|
<label class="check-row" for="beta">
|
|
<input type="radio" id="beta" name="system" value="beta" />
|
|
<span>参宿四 Betelgeuse</span>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<label class="field-row" for="shield-level">
|
|
<span>护盾强度</span>
|
|
<input type="range" id="shield-level" min="0" max="100" value="75" />
|
|
</label>
|
|
|
|
<button type="submit">发射</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</canvas>
|
|
<div class="fallback-preview" aria-hidden="true">
|
|
<p class="fallback-label">当前浏览器未启用实验 API，下面显示同一 DOM 表单的静态预览。</p>
|
|
<div class="control-panel preview-panel">
|
|
<fieldset>
|
|
<legend>飞船控制台</legend>
|
|
<label class="field-row">
|
|
<span>飞船名称</span>
|
|
<input type="text" value="Canvas 远航者" disabled />
|
|
</label>
|
|
<label class="check-row">
|
|
<input type="checkbox" checked disabled />
|
|
<span>启动超空间引擎</span>
|
|
</label>
|
|
<fieldset class="nested-fieldset">
|
|
<legend>目标星系</legend>
|
|
<label class="check-row">
|
|
<input type="radio" name="preview-system" checked disabled />
|
|
<span>半人马座 Alpha</span>
|
|
</label>
|
|
<label class="check-row">
|
|
<input type="radio" name="preview-system" disabled />
|
|
<span>参宿四 Betelgeuse</span>
|
|
</label>
|
|
</fieldset>
|
|
<label class="field-row">
|
|
<span>护盾强度</span>
|
|
<input type="range" min="0" max="100" value="75" disabled />
|
|
</label>
|
|
<button type="button" disabled>发射</button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="notes" aria-label="运行说明">
|
|
<h2>运行条件</h2>
|
|
<p>
|
|
Chrome 官方文章说明：该 API 在 Chrome 148-150 处于源试用阶段，本地测试需要
|
|
Chrome Canary 149+，并开启 <code>chrome://flags/#canvas-draw-element</code>。
|
|
</p>
|
|
<h2>可验证点</h2>
|
|
<ul>
|
|
<li>表单控件来自真实 DOM，不是 canvas 手绘控件。</li>
|
|
<li>输入框、复选框、单选项、滑块和按钮可直接操作。</li>
|
|
<li>JS 每次 paint 后同步 DOM transform，让命中区域与 canvas 绘制位置对齐。</li>
|
|
</ul>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="./app.js" type="module"></script>
|
|
</body>
|
|
</html>
|