Javascript 获取特定x，y坐标下矩形的颜色

我希望能够得到特定x，y处像素的颜色 画布上的坐标为矩形颜色，但像素将 苏菲斯

是否可以在不添加任何附加库的情况下使用普通javascript实现这一点

---

我是基于移动平台的理念开发的，我不想使用外部库。感谢

Canvas'getImageData返回一个ImageData对象，该对象复制画布上指定矩形的像素数据

var color = canvas2d_context.getImageData(pixel_coord_x, pixel_coord_y, 1, 1);

console.log('pixel red value:   ' + color.data[0]);
console.log('pixel green value: ' + color.data[1]);
console.log('pixel blue value:  ' + color.data[1]);
console.log('pixel alpha value: ' + color.data[1]);

---

…主要来自

要想得到答案，让我们直接进入主题

您需要context.getImageDatax，y，width，height

这将从画布中抓取一个矩形，并以对象的形式返回其中的所有像素。这个对象又有一个数据属性，无论出于什么目的，它都只是一个普通数组，它不是，但如果您只想从中读取，可以假装它是

数据数组看起来像

[r，g，b，a，r，g，b，a，r，g，b，a，…]其中r，g，b和a是一个像素颜色的红色、绿色、蓝色和alpha通道。像素的排列顺序就像是在一本英语书中从左到右，然后从上到下阅读一样

出于您的目的，您可以只执行var pixel=context.getImageDatax，y，1，1.data。那么如果你想知道红色部分，像素[0]，绿色？像素[1]。。。等等

---

然而，在我的实验测试中，getImageData是一个非常昂贵的操作，尤其是在Firefox中；Chrome处理速度更快，但边界检查更少。如果您希望每秒多次执行此查询，那么获取一个更大的矩形来缓存某些结果可能是值得的。当然，如果像素数据快速变化，这将不起作用。

谢谢，这正是我需要的帮助：D