取色位置为什么偏了：屏幕坐标不能直接当图片坐标

鼠标看起来点中了 Logo 中间，读到的颜色却像是旁边背景。先别急着判断图片压缩坏了：网页里显示的宽高，可能并不是画布实际保存的像素宽高。把屏幕上的坐标直接拿去读画布，取样点就会偏。

同一个中心点，可以有两组坐标

下面是为说明换算构造的数值例子，不是某张客户图片的测试记录。假设画布实际是 720×480 像素，页面把它显示成 360×240。鼠标距离显示框左边 180、上边 120，位于显示框中心。对应画布位置应该是：

x = 180 ÷ 360 × 720 = 360
y = 120 ÷ 240 × 480 = 240

如果直接读取画布的 (180,120)，你读到的是靠左上方的点，而不是中心。浏览器窗口变窄、侧栏打开、页面布局改变，都可能让显示框与画布尺寸的比例变化。

坐标换算要分两轴做，不能先假定横纵缩放比例相同。也不要只乘一个设备像素比：设备像素比并不告诉你这张画布被 CSS 缩到了多宽。

应该减去显示框位置，再按宽高换算

图叮取色器当前使用画布的显示矩形取得位置与宽高，再分别计算：

画布 x = (鼠标 clientX - 显示框 left) ÷ 显示框 width × canvas.width
画布 y = (鼠标 clientY - 显示框 top) ÷ 显示框 height × canvas.height

clientX/clientY 和显示矩形的 left/top 属于同一视口坐标体系。页面滚动后，别把它们与文档坐标混着相减。这里描述的是当前工具的实现，不是让所有项目照搬同一个比例常量。带复杂变换的自建界面，还需要核对自己的变换关系。

坐标正确，也不等于读到了原图的每一个像素

当前取色器会先把图片缩到适合工作台的预览宽度，再限制画布单边与面积；它读取的是这张预览画布。原图很大时，重采样可能把邻近颜色混在一起。

所以要把两个问题拆开：

• 取样点整体偏到旁边，先检查坐标映射；
• 位置没偏，但边缘出现几个不同色值，检查缩放、抗锯齿和原图中的渐变。

第二种情况可以继续看边缘抗锯齿与取色差异。如果需要逐原像素的测量，应使用能确认原尺寸与取样位置的流程，不把缩小预览的色值当作原始像素报告。

用三个位置做一次核对

先选一张自己制作的、颜色区域边界清楚的图片，分别检查左上区域、中心和右下区域。每次同时记录显示框宽高、画布宽高与取样点；改变浏览器窗口宽度后再核对相同区域。

如果调整布局后总是跑偏，坐标问题比颜色格式问题更值得优先处理。若仅细线和文字边缘变化，就不要继续靠改坐标修颜色。

需要取色时可打开图叮图片取色器。当前页面允许先选图和看预览；真正点取色值或复制结果会经过登录门禁。先确认取到了正确区域，再决定这个颜色能否用于后续设计。