在Javascript-player

Question

作为项目的一部分，我必须从一个文本文件在JS播放器上呈现视频，该文件包含点 - 所有更改的坐标以及每个帧中的颜色。下面是我用来在屏幕上绘制这些点的代码。

但问题是每帧中更改像素的数量高达~20,000，我需要在不到30ms（帧间时差）中显示这些像素。因此，当我运行此代码时，浏览器几乎每帧都会挂起。有人可以建议改善吗？

非常感谢任何帮助。

c.drawImage(img,0,0,800,800);
    setInterval(
        function(){
            while(tArr[index]==time) {
                var my_imageData = c.getImageData(0,0,width, height);
                color(my_imageData,Math.round(yArr[index]),Math.round(xArr[index]),Math.round(iArr[index]),255);
                c.putImageData(my_imageData,0,0);
                index=index+1;
            }
            time = tArr[index];
        }
    ,30);

xArr，yArr，iArr，tArr分别是要呈现的对应点的x坐标，y坐标，强度值和出现时间的数组

function color(imageData,x,y,i,a){  //wrapper function to color the point
    var index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = i;
    imageData.data[index+1] = i;
    imageData.data[index+2] = i;
    imageData.data[index+3] = a;
}