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