putImageData不显示图像

Question

我使用以下函数来更新canvas元素的内容，其中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);
}`

它似乎不适用于Chrome 8，因为我得到了这张图片：

我检查了此函数生成的img.data数组，数据是否正确。所以我假设问题出在putImageData函数上。还有其他人遇到过同样的问题吗？可能有什么不对？

Answer 1

画布imagedata数组不是每个像素[r，g，b]有3个条目，而是4 [r，g，b，a]，所以如果％3应该设置alpha值，它应该真的是％4。

此刻，第一个条目（0）的异常，然后它将第4个条目（i = 3）设置为255（正确），但接下来它将第7个条目（i = 6）设置为255，这意味着而不是[r，g，b，a，r，g，b，a]你有[r，g，b，a，r，g，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);
}`