キャンバスピクセルを実行し、すべての白ピクセルのx、y、位置を見つけよう。

Question

キャンバスに白いテキストを描いている。

Iは、次いで、キャンバス画像データを取得し、その白かどうかをチェックする各画素を通る：

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

Iが「getImageData」は最初の要素である一次元アレイの赤色値で返すことをどこかで読ん第2ピクセルは青、第3ピクセルは緑、第4ピクセルはアルファ

です。したがって、ループを4回繰り返します。

白いピクセルが見つかった場合は、それを "possiblePxs"配列に格納します。

後の私のコードでは、私はこれらの画素の1つを選択して、その場所 で何かを描画する必要があるので、最初のiは、0と「possiblePxs」の長さとの間に新たなランダムインデックス作成：次に

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

を

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

iは次いでpossiblePxsの値からrandomXを減算してY位置を得ることができる：すなわち、ランダム指数がキャンバスの高モジュラスで、x座標を得るために、私はちょうどpossiblePxsの値の結果を取りますランダム指数でそして再びキャンバスの高さで割り：

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

をしかし、これは私が、そのどこにもキャンバスに白画素のいずれかに近い場所でRECTを描画するとき、動作していないようですか？

私は、ループまたはx、y部分を見つけるの計算を混乱させているに違いありません。私は多分君たちの一つは、私が間違っていたものを私に言うことができるし、それを修正する方法を:)

Answer 1

あなたがiの値を押すと、あなたは4でiを分割する必要があります期待していた。

this.possiblePxs.push(i/4); 

そして、 Y座標についても同様

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

：Xの抽出は、キャンバスの幅ない高さを法とすべきである座標

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