Javascript 循环，直到在画布中找到一些颜色相同的像素

我试着在画布上找到一个红色，比如说，我在画布上画了一个正方形，所以我想知道如何循环通过这个正方形，当我检测到它时，得到x和y，从现在开始，我有：

var imgData = context.getImageData(face.x-1, face.y-1, 15+2, 15+2);
var pixels = imgData.data;

for (var i = 0; n = pixels.length, i < n; i += 4) {
    var red = pixels[i];
    var green = pixels[i+1];
    var blue = pixels[i+2];
    var alpha = pixels[i+3];
    //red color
    if(red == 255 && green == 0 && blue == 0){
         //fired when color is red
    }

var imgData = context.getImageData(face.x-1, face.y-1, 15+2, 15+2);
var pixels = imgData.data;

for (var i = 0; n = pixels.length, i < n; i += 4) {
    var red = pixels[i];
    var green = pixels[i+1];
    var blue = pixels[i+2];
    var alpha = pixels[i+3];
    //red color
    if(red == 255 && green == 0 && blue == 0){
         //fired when color is red
    }

但这只是一个测试，向您展示我正在尝试做什么（那些img是我在项目中使用的），但我无法在JSFIDLE上看到它

我试着给他定位

var w = cara.x-1 + ((i / 4) % (imgData.width));
var z = cara.y-1 + Math.floor((i /4)/(imgData.width));

但是不起作用

编辑 我面临着这个问题

我创建此文件是为了保存x和y：

var xy={x:2,y:2};

然后我调整了你的循环：

function findMatchingXY(R,G,B,tolerance){
// get the pixel data of the canvas
var data=context.getImageData(0,0,img.width,img.height).data;
// loop through all pixels
for(var y=0;y<img.width;y++){
    for(var x=0;x<img.height;x++){
        // find the pixel data from the data[] rgba array
        //     representing the pixel at [x,y]
        var n=(y*img.width+x)*4;
        // compare this pixel's color channels with the targets
        var matchesRedTarget=Math.abs(R-data[n])<tolerance;
        var matchesGreenTarget=Math.abs(G-data[n+1])<tolerance;
        var matchesBlueTarget=Math.abs(B-data[n+2])<tolerance;
        // does this pixel match the target
        if(data[n+3]>30 && matchesRedTarget
            && matchesGreenTarget && matchesBlueTarget){
            // return the x,y of the first matching pixel
            return({x:x,y:y});
        }
    }}
// no matching pixels found, return null
return(null);
}

函数查找匹配XY（R、G、B、公差）{
//获取画布的像素数据
var data=context.getImageData（0,0，img.width，img.height）；
//循环遍历所有像素
对于（var y=0；y，因为我只有51%的把握理解您的问题，所以我将留下这个示例代码，希望它能够帮助您回答或澄清您的问题。代码的关键部分是
findMatchingXY
函数，我对它进行了注释，以说明它是如何工作的


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
变量大小=15；
变量$xy=$（'#xy'）；
var targeted=255；
var targetGreen=255；
var targetBlue=187；
变异系数容差=5；
ctx.fillStyle='black'；
ctx.fillRect（0,0，cw，ch）；
$（'#place'）。在（'单击'，函数（）上）{
//计算一个随机的x，y并在那里画一个15x15的矩形
var x=Math.random（）*（cw大小）；
var y=Math.random（）*（ch大小）；
ctx.fillStyle='black'；
ctx.fillRect（0,0，cw，ch）；
ctx.fillStyle='rgb（'+targeted+'、'+targetGreen+'、'+targetBlue+'）；
ctx.fillRect（x，y，15,15）；
});
$（'#find'）。在（'单击'，函数（）上）{
var xy=findMatchingXY（）；
if（xy）{
$xy.text（'在x='+xy.x+'，y='+xy.y处找到匹配的矩形）；
}否则{
$xy.text（'没有匹配的rect'）；
}
});
$（'#place'）。触发器（'click'）；
函数findMatchingXY（）{
//获取画布的像素数据
var data=ctx.getImageData（0,0，cw，ch）.data；
//循环遍历所有像素
对于（var y=0；ywell，您对完美颜色有多大把握？有一些库可以帮助您跟踪颜色主要是红色、绿色或蓝色。我们看到的红色大部分不是
#ff0000
。但是，由于您说要查找不匹配的像素，因此可能更容易首先确定始终存在哪种颜色，例如nd返回不属于该定义颜色类型的所有其他像素。对于其他像素，您必须检查如何缩放rgb输入值以“捕捉”匹配的红色像素（因此，
\cf3030
也仍然是红色，只是稍微“细微差别”）嗯，现在你可以回答我的问题了吗？我接受你所有的建议，但我试图知道如何循环遍历图像的所有像素，直到得到X和Y。当我发现一个红色像素时，你的图像数据是一个17列*4（每像素1字节）每行的块（你有17行），因此，你的
（I/4）%17是您的x位置，y位置是数学楼层（（i/4）/17）
循环如何创建？对不起，您的问题只是如何在整个画布上重复搜索过程，直到找到包含红色像素的块？因为您的问题表明您理解所有这些内容？无论我阅读标题和问题多少次，我都不确定是什么你的意思是/想这样做…是的，也许这是答案的50%…但是如果你看到我的图像，你会看到一条红线，这意味着迷宫的入口，所以我想知道如何循环图像，找到那条红线，将微笑放在它的前面，这就是答案，所以我想找到红线，将笑脸放在这条红线所在的位置，我该怎么做看一看这条红线？我明白了，我怎样才能用你的例子把笑脸和X和Y放在一起，但我只需要这50%多一点啊，我（现在！）看到迷宫右侧几乎看不见的红线。好了，我给出的代码找到了最左边和最上面的目标（红色）画布上的像素。我的演示找到一个正方形的左上角，但你可以使用完全相同的代码来找到迷宫线的左上角像素。因此你不需要不同的代码，只需使用答案的
findMatchingXY
来找到你的红线。干杯！它在哪里找到左上角？因为我看到了你的演示，它随机移动，然后显示出来x和y。。。
function findMatchingXY(R,G,B,tolerance){
// get the pixel data of the canvas
var data=context.getImageData(0,0,img.width,img.height).data;
// loop through all pixels
for(var y=0;y<img.width;y++){
    for(var x=0;x<img.height;x++){
        // find the pixel data from the data[] rgba array
        //     representing the pixel at [x,y]
        var n=(y*img.width+x)*4;
        // compare this pixel's color channels with the targets
        var matchesRedTarget=Math.abs(R-data[n])<tolerance;
        var matchesGreenTarget=Math.abs(G-data[n+1])<tolerance;
        var matchesBlueTarget=Math.abs(B-data[n+2])<tolerance;
        // does this pixel match the target
        if(data[n+3]>30 && matchesRedTarget
            && matchesGreenTarget && matchesBlueTarget){
            // return the x,y of the first matching pixel
            return({x:x,y:y});
        }
    }}
// no matching pixels found, return null
return(null);
}