javascript - HTML Canvas putImageData 导致帧重叠

Question

我正在尝试从 websocket 读取像素(逐帧)并将其渲染到 Canvas 上(灰度)。数据显示正常，只是当前帧的像素与前一帧重叠显示。因此，几帧后图片就会被弄脏。

我想在渲染当前帧之前清除前一帧。正确的方法是什么？

我正在使用 putImageData() 来渲染框架。我在调用 putImageData() 之前尝试过clearRect()。并尝试在再次填充之前清除 Imgdata (Imgdata.data = [];) 数组，但这些方法都不起作用。

`   var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    var Imgdata = context.createImageData(100,100);
    var numPixel = Imgdata.data.length/4;   

 ws.onmessage = function (event) {
            var bytes = new Uint8Array(event.data);
            console.log("data: " + numPixel + " bytes: "+ bytes.length);
            //Imgdata.data = [];
        for (var i = 0; i < numPixel; i++) {
                Imgdata.data[(i*4)+Math.round(bytes[i]/85)] = (bytes[i]%85)*3;
                Imgdata.data[(i*4)+3] = 255;

                Imgdata.data[(i*4)+0] = bytes[i];
                Imgdata.data[(i*4)+1] = bytes[i];
                Imgdata.data[(i*4)+2] = bytes[i];
                Imgdata.data[(i*4)+3] = 255;

            }
            //context.clearRect(0, 0, canvas.width, canvas.height);
            context.putImageData(Imgdata,0,0);
        };
`

Answer 1

我想说，原因很可能是由于 for 循环内的第一行，在不知道数据的情况下，我不知道它的作用，但 id 看起来不正确。

// ???
Imgdata.data[(i*4)+Math.round(bytes[i]/85)] = (bytes[i]%85)*3;

如果数据是随机的，那么这将随机设置每个像素的颜色 channel 之一。

除此之外，我看不到任何会导致您所描述的错误。

我重写了代码只是作为提高性能的建议。

    const canvas = document.querySelector("canvas");
    const context = canvas.getContext("2d");
    const imgdata = context.createImageData(100,100);
    const pix = imgdata.data; 
    pix.fill(255); // set all to 255 To cover the alpha channel
    const numPixel = pix.length;   // best leave as byte count

    ws.onmessage = function (event) {
        const inData = event.data;  
        var inIndex = 0; 
        var i = 0; 
        while(i < numPixel){
            pix[i ++] = pix[i ++] = pix[i ++] = inData[inIndex ++];
            i++; 
        }
        context.putImageData(imgdata,0,0);
   };

如果传入的数据不完整，函数 putImageData 会完全替换像素，这应该起作用。如果套接字数据中未定义任何像素，它们将被设置为零并显示为黑色。