html画布像素缓冲区

Question

我不知道正确的术语,但在GTK中我认为它被称为像素缓冲区.您可以将全部或部分绘图区域复制到pixbuf,然后将pixbuf转储回屏幕,而不是通过再次渲染整个事物.我正在实施一个菜单栏,菜单栏下降并遮挡下面的所有东西.但是,绘制整个画布需要几秒钟,所以我想知道是否有正确的方法来复制将被下拉菜单遮挡的所有内容,然后当关闭下拉菜单时,将其重绘到屏幕上.我想这可以通过context.getImageData()函数完成,但我已经读过它效率非常低.

Answer 1

确实,getImageData()效率太低了.但是,你有一个更好的开始,特别是你想要做的事情:

使用canvas上下文的drawImage方法,您可以传入图像,但也可以传入另一个画布.因此,构建一个永远不会添加到页面的临时画布:

// only exists in javascript, not on the page
tempcanvas = document.createElement('canvas');
tempcanvas.height = (normal canvas width);
tempcanvas.width = (normal canvas height);

然后,您可以tempcanvasContext.drawImage(normalCanvas, 0, 0)在创建下拉菜单之前调用以获取当前画布的快照.当下拉菜单消失时,您调用normalcanvasContext.drawImage(tempcanvas, 0, 0)绘制它.

我希望这能提供一个很好的总体思路,它应该比它快得多getImageData.只需复制要重绘的屏幕的确切部分,即可使效率更高.