HTML Canvas putImageData 导致帧重叠

Question

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

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

我正在使用 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;

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

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

我重写代码只是为了稍微提高性能。

    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 函数会完全替换像素。如果套接字数据中未定义任何像素，它们将被设置为零并显示为黑色。