这段代码不应该让整个画面变黑吗？

Question

在 p5.js 中，我正在尝试为个人项目处理图像的每个像素，所以我想我会慢慢开始，并尝试让每个像素变黑。出于某种原因，屏幕只是保持白色，我不知道为什么像素没有更新。这是代码：

var Canvas;
var srcImg;
var defaultImg = "http://i.imgur.com/ARg0OOy.jpg";

function preload() {
srcImg = loadImage(defaultImg);
}

function setup () {
  createCanvas(srcImg.width,srcImg.height);
  noLoop();
}

function draw() {
  srcImg.loadPixels();
  for (var x = 0; x < srcImg.width; x++) {
    for (var y = 0; y < srcImg.height; y++) {
      var loc = x + y*srcImg.width;
      srcImg.pixels[loc] = color(224,29,29);
    }
  }
  console.log(loc);
  console.log(srcImg.width);
  console.log(srcImg.height);
  console.log(srcImg.width * srcImg.height);
  srcImg.updatePixels();
  //image(srcImg, 0,0,srcImg.width, srcImg.height);
}

此外，如果我取消注释最后一行，我会看到原始图片，它在顶部被截断（并且没有将每个像素都变成黑色）。您可以亲眼看看 here. 对为什么会发生这种情况有什么想法吗？

编辑：我什至尝试将一行像素设为鲜艳的红色，而我得到白屏的原因是无论我将像素设置为什么颜色，它们都会变成白色...还有，当我尝试将整行设为红色时，它停在大约 1/4 处，如图所示 here（并且仍然是白色）。我不知道为什么会这样。

Answer 1

您将所有像素设为黑色，然后您在这些黑色像素之上绘制 srcImage。所以你只看到 srcImage.

尝试注释掉 image(srcImg, 0,0,srcImg.width, srcImg.height); 行以查看黑色像素。

这段代码不应该让整个画面变黑吗？

Shouldn't this code make the whole picture black?

javascript

image

image-processing

p5.js