在特定的x，y坐标处获取矩形的颜色

-4

我希望能够在画布上获得特定x，y 坐标处的像素的颜色（矩形的颜色，但像素将为 sufice）。在特定的x，y坐标处获取矩形的颜色

有没有反正这样做与普通的JavaScript没有添加任何额外的库？

我正在开发它与移动平台的想法，并不希望使用外部库。谢谢

来源

2013-02-16 user2078816

-1没有研究努力 – 2013-02-16 16:48:39

-1你什么也没试。你只是想要我们的答案....... – 2013-02-16 17:02:34

要知道答案，让我们直奔source。

你想context.getImageData(x, y, width, height);

这抓住的一个矩形的画布，并有返回的所有像素在“ImageData”对象的形式。这个对象又有一个“数据”属性，对于所有的意图和目的，它只是一个普通的数组（不是，但你可以假装它是如果你只是想读取它）。

的数据阵列看起来像

[r,g,b,a,r,g,b,a,r,g,b,a,...]其中，r，G，B，和a是一个像素的颜色的红色，绿色，蓝色，和alpha通道。这些像素的排列方式好像是在英文书籍中一样（从左到右，然后从上到下）。

为了您的目的，您可以只做var pixel = context.getImageData(x,y,1,1).data。那么如果你想知道红色的部分，做pixel[0]，绿色？ pixel[1] ...等等。但是，在我的经验测试中，getImageData是一个令人难以置信的昂贵的操作（特别是在Firefox中; Chrome处理速度更快，但边界检查更少）。如果您希望每秒执行多次查询，则可能需要使用较大的矩形来缓存某些结果。如果像素数据快速变化，这当然不起作用。

来源

2013-02-16 16:54:33

谢谢，这正是我需要的帮助：D – user2078816 2013-02-16 17:29:16

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]);

...大多来自http://www.w3schools.com/tags/canvas_getimagedata.asp

来源

2013-02-16 16:49:10

在特定的x，y坐标处获取矩形的颜色

回答

相关问题