Question

我有一张画布，我已经在上面画了一些白色文字。

然后我获取画布图像数据并遍历每个像素，检查它是否为白色：

  var pixelData = 
  this.ctx.getImageData(0,0,this.ctx.canvas.width,this.ctx.canvas.height);


    for(var i = 0; i < pixelData.data.length;i+=4) //run through pixels
        if(pixelData.data[i] == 255 && pixelData.data[i+1] == 255 && pixelData.data[i+2] == 255) //is white?
            this.possiblePxs.push(i);

我在某处读到＆＃34; getImageData＆＃34;返回一维数组，其中第一个元素是第一个像素的红色值，第二个是蓝色第三个是绿色，第四个是alpha

所以我在每次迭代时将循环增加4。

如果找到白色像素，我将其存储在＆＃34; possiblePxs＆＃34;阵列。

稍后在我的代码中，我需要选择其中一个像素并在其位置绘制一些东西所以首先我创建一个介于0和＆＃34; possiblePxs＆＃34;的长度之间的新随机索引：

var randomPx = Math.floor(Math.random()*this.possiblePxs.length)

然后，为了获得x位置，我只需将该随机索引模数中的possiblePxs值的结果取为画布高度：

var randomX = this.possiblePxs[randomPx] % this.ctx.canvas.height

然后我可以通过从随机索引处的possiblePxs值中减去randomX并再次将其除以画布的高度来获取y位置：

var randomY = (this.possiblePxs[randomPx] - randomX ) / this.ctx.canvas.height;

然而，当我在画布上任何白色像素附近的位置绘制一个矩形时，这似乎无法正常工作？

我一定搞砸了循环或找到x，y部分的数学。我希望也许你们其中一个人可以告诉我我做错了什么以及如何解决它：）

Answer 1

当您推送i的值时，您应该将i除以4：

this.possiblePxs.push(i/4);

X坐标的提取应该以 width 为模，而不是画布的高度：

var randomX = this.possiblePxs[randomPx] % this.ctx.canvas.width;

类似于Y坐标：

var randomY = (this.possiblePxs[randomPx] - randomX ) / this.ctx.canvas.width;

运行画布像素，找到每个白色像素的x，y位置

1 个答案: