我正在尝试从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);
};
`
最佳答案
我会说原因很可能是由于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完全替换了像素。如果套接字数据中未定义任何像素，则将它们设置为零，并显示为黑色。
关于javascript - HTML Canvas putImageData导致框架重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44273695/