javascript ImageData复制或移动性能

Question

我正在为 SDR 接收器编写一个“瀑布”图，该图显示在网页的 Canvas 中。

Canvas 的大小为 w=1000 h=800 像素。 顶行每 50 毫秒从服务器传送一次。 浏览器(使用 javascript)必须将所有行向下移动一行，然后在顶部插入新行。这给出了瀑布的外观，其中所有像素都从上到下移动。

它工作正常，但是像素移动的 CPU 负载非常高，对于树莓派来说太高了。

我正在做的是:

var imagedata = context.getImageData(0,0,pixwidth,height-1);
var dataCopy = new Uint8ClampedArray(imagedata.data);
for(i=(dataCopy.length - (2*pixwidth*4)); i>= 0; i--) {
    dataCopy[i+ pixwidth*4] = dataCopy[i];
}

imagedata.data.set(dataCopy);    
// insert new top line
// ....

context.putImageData(imagedata, 0, 0);

我也试过直接复制imagedata[some index]中的像素数据， 这给出了几乎相同的糟糕表现。

在另一个 C 程序中，我用一个非常快的简单 memcpy 操作做了同样的事情。但是用 Javascript 做什么？ 有 800.000 个像素，即 3.200.000 个字节。如何在 Javascript 中以最佳性能复制或移动它们？

Answer 1

var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');

function draw() {
    ctx.fillStyle = `hsla(${360 * Math.random()}, 100%, 50%, 1)`;
    ctx.fillRect(0, 0, cv.width, 10);
    ctx.drawImage(cv, 0, 10);
}

setInterval(function() { draw() }, 200)

<canvas id="cv" width="800" height="400"></canvas>

画完一条线后，拍摄整个 Canvas 的快照，并在 y 尺度上偏移 10 像素重新绘制。重复这个过程，你会得到瀑布般的效果。