用requestAnimationFrame实现真暂停需维护isPaused状态，仅在非暂停时执行更新与渲染；避免cancelAnimationFrame，禁用按钮防连点，暂停UI用visibility:hidden+pointer-events:none保持布局，Canvas暂停时应clearRect再绘制菜单。
HTML 本身不能直接“做”暂停菜单——它只是结构容器；真正控制暂停逻辑的是 JavaScript，而样式和交互体验靠 CSS 配合。没有 requestAnimationFrame 暂停、没有游戏主循环的中断、没有状态标记，光靠 HTML+CSS 做出来的只是个静态遮罩层，点不了、停不住、 resume 会乱。
怎么用 requestAnimationFrame 实现真暂停
大多数 Canvas 或 DOM 游戏靠 requestAnimationFrame 驱动帧循环。暂停的本质不是停止浏览器渲染，而是切断“下一帧是否执行游戏逻辑”的判断链。
- 在主循环里加一个全局布尔变量
isPaused = false，每次进入gameLoop()先检查if (isPaused) return; - 不要用
cancelAnimationFrame后再requestAnimationFrame恢复——这容易丢帧或触发两次回调，只需跳过逻辑更新 + 渲染即可 - 键盘监听（如
keydown）要防重复触发：按一次 P 键切换isPaused，别用keypress（已废弃）或没加event.repeat === false判断
display: none 不能用于暂停界面的遮罩层
用 display: none 隐藏暂停菜单会导致元素脱离文档流，DOM 尺寸重排，且焦点丢失——用户按 ESC 或点击 Resume 后，可能无法立刻恢复键盘输入焦点（尤其在 Canvas 游戏中）。
- 正确做法是用
visibility: hidden+pointer-events: none控制可见性与交互，或用opacity: 0+pointer-events: none保持布局占位 - 遮罩层必须设
z-index高于游戏画布，但低于系统级弹窗（比如浏览器全屏提示），否则点不中按钮 - 如果用了
transform: scale(0)动画隐藏，记得 transition 完成后再设pointer-events: none，否则动画中途就不可点了
Canvas 游戏里暂停时要不要清空 clearRect
要，但得看情况。如果暂停菜单是全屏覆盖的 UI 层，不清 clearRect 可能导致上一帧残留（比如角色卡在跳跃半空），视觉上像“冻住”，但其实是未刷新的脏帧。
- 推荐暂停后仍调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，再单独绘制暂停 UI（文字、按钮） - 如果游戏有复杂背景滚动或粒子效果，暂停时应停掉所有
setInterval/setTimeout计时器，否则clearRect再画也会被后续定时器干扰 - 注意 Canvas 的
backingStorePixelRatio和设备像素比匹配问题：暂停重绘 UI 文字时若没缩放，高 DPI 屏幕下按钮文字可能模糊
最常被忽略的一点：暂停菜单里的按钮（Resume/Restart/Quit）必须绑定到游戏循环的同一事件循环上下文，不能在 onclick 里直接写 isPaused = false 就完事——得确保它触发时，主循环正在等待下一帧，而不是刚执行完物理更新却还没渲染，否则 resume 瞬间会出现位置跳变或输入延迟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
