canvas上直接绑定click事件没反应，因为canvas只是绘图表面，不自动跟踪图形位置；需用getBoundingClientRect获取位置并归一化坐标，再手动做碰撞检测。
canvas 元素上直接绑定 click 事件为什么没反应
因为 本身只是个绘图表面，不自动跟踪内部绘制的图形位置。直接在 canvas 上监听 click 能拿到坐标，但不会知道你点中了哪个游戏对象（比如按钮、角色、方块）。
必须手动把鼠标/触控坐标映射到 canvas 坐标系，再判断是否落在目标区域内。
- 用
getBoundingClientRect()获取 canvas 左上角在视口中的真实位置，减去 clientX/clientY 得到相对于 canvas 的坐标 - 注意缩放或 CSS transform（如
width: 100%）会导致 canvas 内部坐标与 DOM 坐标不一致，此时需用canvas.width/canvas.height和canvas.clientWidth/canvas.clientHeight计算缩放比 - 移动端必须同时处理
touchstart，且要调用event.preventDefault()防止滚动干扰
如何统一处理鼠标和触摸点击的坐标归一化
写一个通用函数把原始事件转成 canvas 内部像素坐标，避免重复计算：
function getCanvasPoint(canvas, event) {
const rect = canvas.getBoundingClientRect();
let x, y;
if (event.type.startsWith('touch')) {
const touch = event.touches[0];
x = touch.clientX - rect.left;
y = touch.clientY - rect.top;
} else {
x = event.clientX - rect.left;
y = event.clientY - rect.top;
}
// 处理 CSS 缩放
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: x * scaleX,
y: y * scaleY
};
}
这个函数返回的是真正对应 canvas 像素坐标的 {x, y}，后续所有碰撞检测都基于它。
立即学习“前端免费学习笔记（深入）”；
