キャンバス内のピクセルの色を取得できません

Question

キャンバスは2つの部分に分割されています。左の部分は黒で、右の部分は白です。私は特定の行の白いピクセルを見つけるために次のコードを使用していますが、コンソールに何も記録しません。

これはキャンバスの左半分を黒くするコードです。

ctx.beginPath(); 
ctx.rect(0, 0, cw/2, ch); 
ctx.fillStyle = 'black'; 
ctx.fill(); 

これは私がピクセルデータを取得するために使用していたコードです：赤の値の

var imgd = ctx.getImageData(0, 300, 600, 2); 
var pix = imgd.data; 
var white_count = 0; 
for (var i = 0, n = pix.length; i < n; i += 4) { 
    var red = pix[i]; // red 
    var green = pix[i+1]; // green 
    var blue = pix[i+2]; // blue 
    console.log(red); 
    if(red == 255 && green == 255 && blue == 255) { 
     white_count += 1; 
    } 
} 

少なくとも数は255となっているはずですが、起こっていることであるなぜ彼らはすべて0でありますか？これは私のJSFiddleです：https://jsfiddle.net/83Lb96vp/

Answer 1

私はあなたがgetImageDataの寸法が間違っていると思います。

ctx.getImageData(sx, sy, sw, sh);である必要があります。

は、このバイオリンを見てみましょう：

console.clear(); 
 
var c = document.getElementById('c'); 
 
var ctx = c.getContext('2d'); 
 
var sizeMod = 4; // one "sqare" is "sizeMod" * "sizeMod". 
 
c.width = 10 * sizeMod; 
 
c.height = 10 * sizeMod; 
 
for (var x = 0; x < sizeMod; x++) { 
 
    for (var y = 0; y < sizeMod; y++) { 
 
    var color = (Math.abs(Math.round(1 + (Math.random() * 3)) * 4 - 1)).toString('16'); 
 
    color = '#' + color + color + color + color + color + color; 
 
    ctx.fillStyle = color; 
 
    ctx.fillRect(x * sizeMod, y * sizeMod, sizeMod, sizeMod); 
 
    } 
 
} 
 
var imgd = ctx.getImageData(0, 0, 10 * sizeMod, 10 * sizeMod); 
 
var pix = imgd.data; 
 
var white_count = 0; 
 
for (var p = 0; p < pix.length; p += 4) { 
 
    var c = { 
 
    r: pix[p + 0], 
 
    g: pix[p + 1], 
 
    b: pix[p + 2], 
 
    a: pix[p + 3], 
 
    hex: '#' + pix[p + 0].toString('16') + '' + pix[p + 1].toString('16') + '' + pix[p + 2].toString('16') 
 
    } 
 
    if (c.hex == '#ffffff') { 
 
    white_count++; 
 
    } 
 
} 
 
console.log(white_count + "\nis white\none tile is", (sizeMod * sizeMod), "big so", white_count/(sizeMod * sizeMod), "tiles")

<canvas id="c" width="10" height="10" style="min-width: 100%; min-height: 100%;">

jsfiddle