javascript - 垂直循环遍历 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 画布和图像数据，但根据本教程，我猜你的外循环是错误的。显然，在计算数据索引时，您还需要注意运算符的优先级。也许是这样的：

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