Canvas实现2D小游戏需夯实四大支柱：①适配高清屏的画布初始化（结合devicePixelRatio与scale）；②用JS对象建模游戏实体；③requestAnimationFrame驱动的稳定动画循环；④坐标转换后的鼠标/触摸交互。
网页端用 Canvas 实现简单 2D 小游戏场景，核心是把画布当作“动态画板”，用 JavaScript 控制图形绘制、更新和交互，不依赖 DOM 元素堆叠。关键不在写多复杂的效果，而在于搭好四个基础支柱：画布初始化、对象建模、动画循环、输入响应。
设置适配清晰的 Canvas 画布
别只靠 HTML 的 width/height 属性定大小——那只是逻辑尺寸。高清屏（如 MacBook、安卓旗舰）会自动拉伸导致模糊。正确做法是结合 devicePixelRatio 动态设置物理分辨率：
- 用
getBoundingClientRect()获取画布在页面中的显示宽高 - 乘以
window.devicePixelRatio得到真实像素宽高，赋给canvas.width和canvas.height - 再调用
ctx.scale(dpr, dpr)让绘图坐标系保持 CSS 像素单位，避免手动换算 - 每次帧开始前用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空上一帧
用数据结构代替 DOM 来管理游戏对象
Canvas 本身没有“对象”概念，所有角色、砖块、子弹都得自己定义 JS 对象。例如一个可移动方块：
- 包含
x、y（位置）、vx、vy（速度）、type（类型标识）、isAlive（存活状态）等属性 - 绘制时统一走
ctx.drawImage(sprite, x, y, w, h)或ctx.fillRect(x, y, w, h) - 网格类游戏（如连连看、俄罗斯方块）用二维数组存状态，比如
grid[5][3] = 2表示第5行第3列是类型2的砖块 - 避免为每个元素创建 div 或 img 标签——那会拖慢性能，也失去 Canvas 的渲染自由度
用 requestAnimationFrame 驱动稳定游戏循环
不用 setTimeout 或 setInterval。rAF 能与屏幕刷新率同步（通常 60fps），更省电、更顺滑：
- 主循环函数里按顺序执行：更新逻辑（位移、碰撞、计分）→ 清空画布 → 绘制全部对象 → 请求下一帧
- 碰撞检测单独封装，比如小球碰挡板：检查
ball.y + ball.radius > paddle.y且ball.x落在挡板横向上 - 时间敏感操作（如倒计时、技能冷却）用
performance.now()记录毫秒级时间戳，不依赖帧数
绑定鼠标/触摸事件实现直观交互
Canvas 是空白区域，需手动把屏幕坐标转成游戏坐标：
- 监听
canvas.addEventListener('click', handler)或'touchstart' - 用
canvas.getBoundingClientRect()获取画布左上角在视口的位置，再减去事件clientX/Y得到相对坐标 - 再除以缩放比例（即
dpr），得到逻辑坐标，用于判断点中哪个格子或角色 - 拖拽类操作（如拼图、塔防放置）配合
mousedown → mousemove → mouseup三阶段跟踪
