html - 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. 您可以通过仅复制要重绘的屏幕的确切部分来提高效率。