Javascript 为什么我+=4.以黑色和黑色显示图像；使用HTML5画布的白色

在中，为什么循环中的

i

增加了4而不是1？。我试过将changong

I++=4

转换为

I++

，但它不能正常工作。你能告诉我背后的原因吗

function grayScale(context, canvas) {
    var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        var pixels  = imgData.data;
        for (var i = 0, n = pixels.length; i < n; i += 4) {
        var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
        pixels[i  ] = grayscale;        // red
        pixels[i+1] = grayscale;        // green
        pixels[i+2] = grayscale;        // blue
        //pixels[i+3]              is alpha
    }
    //redraw the image in black & white
    context.putImageData(imgData, 0, 0);
  }
  //add the function call in the imageObj.onload
  imageObj.onload = function(){
      context.drawImage(imageObj, destX, destY);
      grayScale(context, canvas);
  };

函数灰度（上下文、画布）{
var imgData=context.getImageData（0，0，canvas.width，canvas.height）；
var像素=imgData.data；
对于（变量i=0，n=pixels.length；i

在我看来，它像i=red，i+1=green，i+2=blue，i+3=alpha。所以i+4将再次变为红色。因此for循环在数组中迭代四次，而不是一次，以区分不同的像素。

在我看来，它像i=red、i+1=green、i+2=blue和i+3=alpha。所以i+4将再次变为红色。因此for循环在数组中迭代四次，而不是一次，以区分不同的像素。

循环的每次迭代都对集合中的四个项目进行操作，从当前值

i

开始

---

因此，下一个序列的开始是

i+4

循环的每个迭代都对集合中的四个项目的序列进行操作，从

i

的当前值开始

---

因此，下一个序列的开始是

i+4

，因为for循环中发生的事情是修改阵列中的四个点，它们表示构成单个像素的红色、绿色、蓝色和alpha通道。for循环递增4以跳转到下一个像素的下一组红色、绿色、蓝色和alpha通道。

因为for循环中发生的事情是修改阵列中的四个点，它们表示构成单个像素的红色、绿色、蓝色和alpha通道。for循环递增4，跳转到下一个像素的下一组红、绿、蓝和阿尔法通道。

看看实际代码，它们使用的是

像素[i]

，但也使用

像素[i+1]

，

像素[i+2]

和注释掉的

像素[i+3]

。一次有四个值，而不仅仅是一个

在图像像素的这种情况下，实际上通常会增加四个（如果数据中完全没有alpha，则增加三个），因为顺序为RGBA

如果你看评论，他们甚至会指出这一事实（去掉不必要的部分）：

如果你考虑数组中的布局，它会产生很多意义：

Array:       [r0,g0,b0,a0,r1,g1,b1,a1,r2,...etc]
Positions:     0, 1, 2, 3, 4, 5, 6, 7, 8

---

如果我们总是先变红的话，我们需要从

0

到

4

到

8

。

看看实际的代码，他们使用的是

像素[i]

，但也使用

像素[i+1]

，

像素[i+2]

和注释掉的

像素[i+3]

。一次有四个值，而不仅仅是一个

在图像像素的这种情况下，实际上通常会增加四个（如果数据中完全没有alpha，则增加三个），因为顺序为RGBA

如果你看评论，他们甚至会指出这一事实（去掉不必要的部分）：

如果你考虑数组中的布局，它会产生很多意义：

Array:       [r0,g0,b0,a0,r1,g1,b1,a1,r2,...etc]
Positions:     0, 1, 2, 3, 4, 5, 6, 7, 8

---

如果要始终首先显示红色，我们需要从

0

到

4

到

8

。

图像数据对象基本上是一个像素阵列

在CSS中，当您设置

颜色时：rgba（255,40,30,1）您正在设置红色、绿色、蓝色和alpha（透明度）。
这是每个像素的顺序

但所有像素都存储为四种颜色，背对背成一条直线

因此，2x2黑白图像如下所示：

var checkerboard = [ 0, 0, 0, 1, 255, 255, 255, 1, 255, 255, 255, 1, 0, 0, 0, 1 ];

这是3个RGB，使左上角的像素变黑（1表示100%可见），然后右上角变白，左下角变白，右下角变黑

因此，当您处理修改单个像素的代码时，您将包括构成1个像素的所有颜色/alpha通道。
ImageData对象基本上是一个像素阵列

在CSS中，当您设置
颜色时：rgba（255,40,30,1）您正在设置红色、绿色、蓝色和alpha（透明度）。
这是每个像素的顺序

但所有像素都存储为四种颜色，背对背成一条直线

因此，2x2黑白图像如下所示：

var checkerboard = [ 0, 0, 0, 1, 255, 255, 255, 1, 255, 255, 255, 1, 0, 0, 0, 1 ];

这是3个RGB，使左上角的像素变黑（1表示100%可见），然后右上角变白，左下角变白，右下角变黑

因此，当您处理修改单个像素的代码时，您需要包括构成1个像素的所有颜色/alpha通道。
因为在for循环中发生的是修改阵列中的四个点，它们表示构成单个像素的红色、绿色、蓝色和alpha通道。for循环递增4，跳转到下一个像素的下一组红色、绿色、蓝色和alpha通道。因为每个“像素”占用阵列的4个元素。我认为在这个例子中，数组的“像素”这个名字是有误导性的。科里说：）如果你简单地使用I++，每个循环它都会将I增加1，而不是4。图像数据数组包含每个像素的四个数据（红色、绿色、蓝色、alpha）。因为for循环中发生的是修改数组中的四个点，它们表示构成单个像素的红色、绿色、蓝色和alpha通道。for循环递增4以跳转