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

垂直遍历HTM5画布中的imagedata

1 个答案: