用 getImageData(x, y, 1, 1) 获取像素 RGBA 值需确保 canvas 的 width/height 属性显式设置、坐标经 getBoundingClientRect() 换算准确，并检查 x、y 是否在画布范围内。
直接用 getImageData(x, y, 1, 1) 获取指定坐标像素的 RGBA 值，关键在坐标换算准确、画布尺寸设置正确、跨域处理到位。
确保 canvas 的 width/height 属性已显式设置
不能只靠 CSS 设置宽高，否则鼠标坐标与像素坐标会错位。必须写成：
<canvas width="800" height="600"></canvas>- JS 中也可动态赋值：
canvas.width = 800; canvas.height = 600; - 若从图片拉伸绘制，需按实际绘制尺寸调整，避免缩放导致取色偏移
把鼠标位置转成画布内的真实像素坐标
用 getBoundingClientRect() 消除滚动和缩放影响：
- 获取画布左上角相对于视口的位置：
const rect = canvas.getBoundingClientRect(); - 计算点击点在画布内的坐标：
const x = e.clientX - rect.left;和const y = e.clientY - rect.top; - 记得检查是否在画布范围内：
if (x >= 0 && x = 0 && y
调用 getImageData 读取单个像素
传入 1×1 区域，直接拿到该点的 RGBA 四个值：
立即学习“前端免费学习笔记（深入）”；
const imageData = ctx.getImageData(x, y, 1, 1);-
const [r, g, b, a] = imageData.data;（data是长度为 4 的Uint8ClampedArray） - 注意：Alpha 值是 0–255 整数，不是 0–1；如需小数可写
a / 255
格式转换与显示建议
把原始数值转成常用颜色格式，方便调试或展示：
- HEX：拼接
rgb分量并补零，如`${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}` - RGBA 字符串：
`rgba(${r}, ${g}, ${b}, ${a / 255})` - 推荐同时输出 RGB、HEX、RGBA 三种形式，覆盖不同使用场景
