初中物理仿真实验网页制作
Overview
将课本里的"探究类"实验（控制变量法）做成一个本地可直接打开、无需联网的单页 HTML 仿真：Canvas 动画演示过程、滑块控制自变量、实时读数、数据记录表 + 自动结论。输出文件可直接嵌进课件或发给学生。
核心价值不在于"能画动画"，而在于两个被反复踩坑、已固化为模板的点：
1. 斜面上的小车必须画在坡面上（轮子贴坡、车身在坡上方）——Canvas 局部 +y 朝屏幕下方，初学者极易把车身画到坡线以下。
2. 交付前用真实渲染核验——把 HTML 真实渲染成几帧 PNG 自己看，而不是凭"代码应该没错"交给用户。用户看不到车 = 多半是画反了方向。
When to use
触发语句示例：
- "做个探究 X 影响因素的实验仿真 / 网页 / 课件"
- "把课本上 XX 实验做成能互动的网页"
- "生成一个可互动的 XX 仿真"
适用范围：初中物理（沪粤版为主）中可用 Canvas 2D 表达、含"改变某量→看某量变化"结构的实验。若熟练度/正确性要求极高（如中考真题演示），优先配合 仿真实验-初中物理 技能里的现成 PhET 风格仿真，本技能用于定制课本专属实验。
不适用：纯公式推导、需要 WebGL/3D 分子级动画的（用 edu-chem-reaction / edu-solid-geometry）。
Workflow
- 定位实验与变量。 确认课本章节、探究的问题、自变量（要改的）、因变量（要测的）、控制变量。设计控制变量法对照路径（如：固定质量改高度看速度；固定高度改质量看质量）。
- 定物理关系。 写出无摩擦理想模型下的公式（如
v=√(2gh)、Ek=mgh、s∝Ek）。让读数有物理意义，而非纯动画。 - 搭单页 HTML。 复制
assets/starter.html作为骨架，按本实验改几何、滑块、读数、数据表与结论逻辑。几何与动画状态机细节见references/geometry.md。 - 自验证渲染。 运行
scripts/render_frames.js <你的html>输出 idle / 过程 / 终点 三帧 PNG，用 Read 工具亲眼确认关键几何是否符合物理实际（例如斜面小车须在坡上、轮子贴坡、终点与木块并排；竖直落体须在沙面上方下落、终点陷入沙中并显示深度）。中文在 PNG 里会是方框（缺字体），只核几何即可。 - 迭代修正。 把用户反馈（"车在坡下""终点没贴木块""斜面太短"）对应到 geometry.md 的画法/状态机改。改完重跑第 4 步。
- 交付。
present_files给出 HTML（浏览器直接打开）与核验帧 PNG。
Resources
assets/starter.html— 可直接复制改编的最小可运行模板（斜面 + 贴坡小车 + 木块 + 状态机 + 数据表）。references/geometry.md— 斜面几何、小车"接触点+倾角"贴坡画法、动画状态机（idle→down→approach→slide→done）、常用物理公式模板、自验证渲染要点。scripts/render_frames.js— 用 @napi-rs/canvas 把目标 HTML 真实渲染成 PNG 帧的通用桩（首次运行前需在受管 node 工作区npm install @napi-rs/canvas）。
Critical gotcha (务必记住)
Canvas 局部坐标里 +y 指向屏幕下方。 在 ctx.translate(cx,cy); ctx.rotate(a) 之后，要画"在坡面上方"的物体，必须用负 local y（车身 y=-(wheelR+车身高)，轮子圆心 y=-wheelR，轮底恰好落在接触点/坡面线上）。若车身画在 +y，小车会浮在坡线下方——这是用户说"小车在斜面下方运动"的根因。详见 references/geometry.md 的 drawTrolley 段。
