Javascript putImageData不'；不显示图像

我使用以下函数来更新canvas元素的内容，其中frame_数据是

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

函数更新canvas（帧数据、宽度、高度）{
img=ctx.createImageData（宽度、高度）；
对于（i=0，j=0；j0）和&（i%3==0））{
img.data[i]=255；
}否则{
img.data[i]=帧_数据[j++]；
}
}
ctx.putImageData（img，0,0）；
}`

它在Chrome 8上似乎不起作用，因为我得到的结果是：

---

我已经检查了这个函数生成的

img.data

数组，数据是正确的。因此，我假设问题在于

putImageData

函数。还有其他人遇到过同样的问题吗？可能有什么问题？

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

目前，第一个条目（0）有一个例外，然后它将第四个条目（i=3）设置为255（正确），但接下来它将第七个条目（i=6）设置为255，这意味着你没有[r，g，b，a，r，g，g，b，a]，而是有[r，g，b，a，r，g，a，b]，随着时间的推移，情况会变得更糟

试一试

函数更新canvas（帧数据、宽度、高度）{
img=ctx.createImageData（宽度、高度）；
对于（i=0；j=0；j

使用来自[r，g，b，r，g，b，…]Oops！格式的像素阵列的数据绘制图像！真不敢相信我竟然没有意识到。非常感谢！

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