html画布像素缓冲区

Question

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

Answer 1

确实如此，getImageData()效率太低。但是对于你正在尝试做的事情来说，有一个更好的开始：

使用画布上下文的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快得多。只需复制要重绘的屏幕的确切部分，即可使效率更高。