0

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

今、念のために - 何かがキャンバス上で白くなければ -> 衝突

#ff0000しかし、赤または緑の色を識別したい#00CC00

どうすればいいですか？

4

2 に答える 2

0

私は本当に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;
}

または単に：

if (pix[0] > 0) {
    gotSomeRed = true;
}
if ((pix[0] + pix[1] + pix[2]) === 0xffffff) {
    gotAWhitePixel = true;
}
于 2013-08-14T14:53:37.063 に答える
0

まず、キャンバスに画像をロードする必要があります。詳細については、画像の読み込みで私のフィドルを試してみてください。

画像がキャンバスにロードされると、オブジェクトのdataメソッドを使用して、ロードされた画像のピクセル レベルの情報を取得できImageDataます。

その前にImageData、キャンバスからオブジェクトを生成する必要があります。スクリプトの最初のステートメント

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

それだけです。

スクリプトの 2 番目のステートメント、

pix = imgd.data;

Unit8ClampedArrayとしてキャンバスに読み込まれた画像のピクセル レベルの詳細を取得します

変数pixは、通常の配列として扱うことができます。例えば

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

これがいくつかのアイデアに影響を与えたことを願っています。

于 2013-08-14T15:27:38.613 に答える