javascript ImageData 复制或移动性能

Question

我正在为 SDR 接收器编写一个 "waterfall" 图，它显示在网页的 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 像素重新绘制。重复这个过程，你会得到瀑布般的效果。

javascript ImageData 复制或移动性能

javascript ImageData copy or move performance

javascript

imagedata