HTML5 Canvas 怎么获取指定坐标像素的颜色数据-H5教程-PHP中文网

用 ctx.getimagedata(x, y, 1, 1) 可获取指定坐标的 rgba 值，需确保坐标准确、图像已绘制且未跨域污染；canvas 宽高须用 html 属性或 js 显式设置，鼠标坐标通过 getboundingclientrect 计算并校验范围；绘图内容须就绪（如图片需 onload 后绘制并设 crossorigin）；返回的 imagedata.data 可解构为 r,g,b,a（0–255），支持转十六进制或 rgba 字符串；注意处理空白画布、非整数坐标、跨域错误等异常。

html5 canvas 怎么获取指定坐标像素的颜色数据

用 ctx.getImageData(x, y, 1, 1) 就能直接拿到指定坐标点的 RGBA 值，核心是确保坐标准确、图像已绘制、且没被跨域污染。

确认 canvas 坐标系和尺寸设置

canvas 的 width 和 height 必须用 HTML 属性或 JS 显式设置（比如 canvas.width = 300），不能只靠 CSS 缩放，否则鼠标坐标会错位。获取鼠标位置时，推荐用：

const rect = canvas.getBoundingClientRect()
const x = Math.floor(e.clientX - rect.left)
const y = Math.floor(e.clientY - rect.top)

再检查 x 和 y 是否在 [0, canvas.width) 和 [0, canvas.height) 范围内，越界会触发安全错误。

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

确保目标内容已绘制完成

颜色数据只来自 canvas 当前已绘制的内容。常见情况包括：

画渐变：用 createLinearGradient 配合 fillRect
绘图片：先等 img.onload 触发，再 ctx.drawImage(img, 0, 0)
跨域图片必须加 img.crossOrigin = "anonymous"，否则 getImageData 报错

读取并解析单像素数据

调用后返回一个 ImageData 对象，关键在它的 .data 属性：

const imageData = ctx.getImageData(x, y, 1, 1)
const [r, g, b, a] = imageData.data —— 直接解构出四个值（都是 0–255 整数）
转十六进制：('#' + 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).toFixed(2)}`