Javascript 使用getImageData识别某些颜色

我不知道如何正确使用

getImageData

进行颜色识别

var imgd = ctx.getImageData(checkx - ln, checky - ln, ln * 2, ln * 2);
pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4){
    if (pix[i] != 255) {
        collision = 1;
    }
}

var imgd=ctx.getImageData（checkx-ln，checky-ln，ln*2，ln*2）；
pix=imgd.data；
对于（变量i=0，n=pix.length；i

现在，为了安全起见-如果画布上的东西不是白色->碰撞

但我想识别红色

#ff0000

或绿色

#00CC00

---

我怎么做呢？

我对API真的很不熟悉，所以这是一个很长的路要走。如果我假设pix[n]代表单个像素的RGB值，那么这将告诉您像素中是否有红色：

if (0xff0000 & pix[i]) {
    gotSomeRed = true;
}

更新：如果是这种情况，则碰撞也将：

if (0xffffff & pix[i]) {
    gotACollision = true;
}

更新2：

显然，API说：

red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];

因此，您可以通过以下任一方式实现我概述的目标：

if (pix[0] & 0xff) {
    gotSomeRed = true;
}
if (((pix[0] << 16) | (pix[1] << 8) | pix[2]) === 0xffffff) {
    gotAWhitePixel = true;
}

---

首先，需要在画布上加载图像。您可以尝试了解更多信息

一旦图像加载到画布上，就可以使用

ImageData

对象的

data

方法获得加载图像的像素级信息

在此之前，必须从画布生成

ImageData

对象。脚本的第一个语句

var imgd = ctx.getImageData(checkx - ln, checky - ln, ln * 2, ln * 2);

就是这样

脚本中的第二个语句

pix = imgd.data;

检索加载到画布中的图像的像素级详细信息，如下所示：

变量

pix

可以视为任何普通数组。比如说

for(var nPix = 0; nPix < pix.length; nPix++) {
  //Some pixel manipulation on the image
}

for（var nPix=0；nPix

---

希望这能激发一些想法。

为什么您认为代码会识别白色？只有当红色强度不是

255

时，它才会将

collision

设置为

1

。为什么要在循环的条件中执行赋值？我需要一种方法来识别画布上的某些颜色，我不知道如何做我不知道在每个pix[]实体中得到什么，但怀特肯定是16777215？而不是255。255仅表示一个平面。在这里读一些有趣的东西：我不会投反对票，但请让自己熟悉，然后更新或删除你的答案：-）

for(var nPix = 0; nPix < pix.length; nPix++) {
  //Some pixel manipulation on the image
}