Question

我正在为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中以最佳性能复制或移动它们？

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>

绘制一条线后，拍摄整个画布的快照，并以y比例偏移10 px重新绘制它。重复此过程，您将获得瀑布般的效果。

javascript ImageData复制或移动性能

1 个答案: