putImageData不显示图像

Question

我使用以下函数更新画布元素的内容，其中frame_data是width*height*3的数组。

function updateCanvas(frame_data, width, height) {
    img = ctx.createImageData(width, height);

    for (i=0, j=0; j < frame_data.length; i++) {
        if ((i > 0) && (i%3==0)) {
            img.data[i] = 255;
        } else {
            img.data[i] = frame_data[j++];
        }
    }
    ctx.putImageData(img, 0, 0);
}`

它似乎不能在Chrome8上工作，因为我得到了这个图像的结果：

​

​

我已经检查了这个函数生成的img.data数组，数据是正确的。所以我假设问题出在putImageData函数上。还有没有人遇到过同样的问题？会出什么问题呢？

Answer 1

画布imagedata数组不是每个像素3个条目r，g，b，而是4个r，g，b，a，所以如果假设%3设置alpha值，它实际上应该是%4。

目前，第一个条目(0)有一个异常，然后它将第四个条目(i=3)设置为255 (正确)，但接下来它将第七个条目(i=6)设置为255，这意味着你有r，g，b，a，b，随着时间的推移，情况会变得更糟。

试一试

function updateCanvas(frame_data, width, height) {

    img = ctx.createImageData(width, height);

    for (i=0;j=0; j < frame_data.length; j=j+3) {
            img.data[i] = frame_data[j];
            img.data[i+1] = frame_data[j+1];
            img.data[i+2] = frame_data[j+2];
            img.data[i+3] = 255;
            i+=4;
    }
    ctx.putImageData(img, 0, 0);
}`