4

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

画布的大小为 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 中以最佳性能复制或移动它们？

4

1 回答 1

2 

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>

绘制一条线后，对整个画布进行快照，并在 y 比例上以 10 px 的偏移量重新绘制它。重复该过程，您将获得类似瀑布的效果。

于 2019-03-01T01:56:07.647 回答