请制作一个可以在浏览器直接打开的单文件 HTML 动态示例，实现「希区柯克变焦」（组合运动）。

视觉目标：相机前后移动，同时反向变焦，让主体大小近似不变。
适用场景：惊觉、眩晕、空间压迫
输入素材：使用简化三维场景与相机投影，区分机位移动和焦距变化；保留俯视机位示意。
实现要求：原生 JavaScript + Canvas 2D，画布 960×540，requestAnimationFrame 按秒驱动，循环周期 6.4 秒。支持暂停、重播，文字效果支持编辑文字。画布缩放时保持 16:9，不依赖框架、在线字体或 AI 接口。

效果边界：需要深度信息、视频或3D。背景大小改变而主体近似稳定；不能把普通缩放叫作此效果。

请按下列现有核心逻辑复现，并补齐共享变量与渲染初始化；需要精确复现时配合图鉴中的完整 HTML，不要只复制片段：
// cam-19 · 希区柯克变焦
// 摘自 cameraDemo(i, t)；依赖该函数的时间、画布及素材初始化。
// 完整可运行版本请切换「完整 HTML」。
if(i===19){let z=3.5+5*u;cam=[0,1.2,z];target=[0,1.2,0];f=z*105}

// 每帧调用，t 的单位是秒：
clean();
cameraDemo(19, t);

交付完整可运行代码，解释可调参数；先确保上述效果，再调整速度、颜色或强度。检查循环首尾、暂停状态、图片载入失败和短标题可读性。