Canvas需用getBoundingClientRect()获取位置并减去clientX/Y得画布坐标；CSS缩放需反向修正；高DPR屏应分离CSS尺寸与canvas宽高，绘图时用ctx.scale(dpr,dpr)。
Canvas本身不直接提供画布坐标（即相对于Canvas左上角的坐标），监听鼠标事件时获取的是页面坐标，需手动减去Canvas在页面中的偏移量才能得到准确的画布坐标。关键在于正确获取Canvas的边界位置，并处理缩放、滚动和CSS变换等干扰因素。
基础方法：用getBoundingClientRect()获取Canvas位置
这是最可靠、兼容性最好的方式，不受父容器定位、边框、内边距或外部滚动影响。
- 在鼠标事件（如
mousemove、click）中调用canvas.getBoundingClientRect() - 用鼠标事件的
clientX和clientY分别减去返回对象的left和top - 结果即为鼠标在Canvas内部的x、y坐标（原点在左上角）
示例代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
console.log(<code>画布坐标: (${x}, ${y})</code>);
});</p>处理CSS缩放（scale）和transform
如果Canvas通过style.transform: scale(1.5)或zoom缩放，getBoundingClientRect()返回的宽高会变化，但鼠标坐标仍是物理像素值，需反向缩放修正。
立即学习“前端免费学习笔记（深入）”；
- 先用
getBoundingClientRect()算出原始画布坐标 - 再除以当前CSS缩放比例（可通过
window.getComputedStyle(canvas).transform解析，或记录缩放值） - 更稳妥的做法是避免用CSS缩放Canvas，改用Canvas内部缩放（
ctx.scale(sx, sy)）并调整逻辑坐标系
适配设备像素比（高清屏）
在Retina屏等高DPR设备上，Canvas绘图需考虑window.devicePixelRatio，否则鼠标坐标与绘制位置可能错位。
- 设置Canvas显示尺寸（CSS宽高）与实际绘图尺寸（
canvas.width/canvas.height）分离 - 鼠标坐标计算仍基于
getBoundingClientRect()（对应CSS尺寸），无需额外除DPR - 绘图时用
ctx.scale(dpr, dpr)或手动将坐标乘以dpr，保持视觉一致
避免常见错误
以下做法容易导致坐标偏差：
- 直接用
canvas.offsetLeft/canvas.offsetTop——受父元素position、border、padding影响，不准确 - 忽略页面滚动——
getBoundingClientRect()已自动处理，而pageX/Y需额外减window.scrollX/Y - 在Canvas有
margin或外边距时未重新计算——getBoundingClientRect()包含margin，但它是页面布局的一部分，不影响坐标转换逻辑
