在HTM5画布中垂直循环显示数据

Question

我正在尝试将循环垂直显示为画布。我的意思是，循环通过第一列，第二，等等。

我的第一个目标是彩色的前半部分宽度。我的代码很奇怪，问题是......我不知道为什么！

loopVertical = function (data, canvas){ 
    for (var x = 0; x < canvas.width*2; x+=4) { 
     for (var y = 0; y < canvas.height; y++) { 
      data[x+y*canvas.width*4] = 255;   
     } 
    } 
    return data; 
} 

结果：我的图像上有红色条纹。这不是我想要的。

后，我需要将图像分成更小的图像，如果我有透明像素的垂直线，但这不是问题:)

Answer 1

我真的不知道关于HTML5的话题画布和图像数据，但根据this tutorial，我的猜测是你的外部循环是错误的。显然，在计算数据索引时，还需要注意运算符的优先级。可能是这样的：

loopVertical = function (data, canvas){ 
    // first half of the width 
    for (var x = 0; x < canvas.width/2; x++) { 
     for (var y = 0; y < canvas.height; y++) { 
      data[(x+y*canvas.width)*4] = 255;  
     } 
    } 
    return data; 
}