我正在为SDR接收器编写一个“瀑布”图,该图显示在网页上的画布中.
画布的尺寸为w = 1000 h = 800像素.
每隔50毫秒从服务器传送一次最上面的一行.
浏览器(使用javascript)必须将所有行向下移动一行,然后在顶部插入新行.这给出了瀑布的外观,其中所有像素都从上到下移动.
它工作正常,但是像素移动的cpu负载非常高,对于树莓派来说太高了.
我正在做的是：
var imagedata = context.getImageData(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);
我也尝试直接复制imagedata [some index]中的像素数据,
这会带来几乎相同的不良表现.
在另一个C程序中,我通过一个非常快速的简单memcpy操作完成了相同的操作.但是用JavaScript做什么呢？
有800.000像素,即3.200.000字节.如何在Javascript中以最佳性能复制或移动它们？
最佳答案
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
function draw() {
ctx.fillStyle = `hsla(${360 * Math.random()},100%,50%,1)`;
ctx.fillRect(0,cv.width,10);
ctx.drawImage(cv,10);
}
setInterval(function() { draw() },200)<canvas id="cv" width="800" height="400"></canvas>画完一条线后,拍摄整个画布的快照,并以y比例偏移10 px重新绘制它.重复该过程,您将获得瀑布般的效果.
