一个非常简单的方法是在同一屏幕位置放置两个画布元素，并为需要显示的缓冲区设置可见性。完成后在隐藏处绘制并翻转。

一些代码：

CSS：

canvas { border: 2px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }

在 JS 中翻转：

Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible';

DrawingBuffer=1-DrawingBuffer;

在此代码中，数组 'Buffers[]' 包含两个画布对象。所以当你想开始绘图时，你仍然需要获取上下文：

var context = Buffers[DrawingBuffer].getContext('2d');

以下有用的链接除了显示使用双缓冲的示例和优势之外，还显示了使用 html5 canvas 元素的其他几个性能提示。它包括指向 jsPerf 测试的链接，这些测试将跨浏览器的测试结果聚合到 Browserscope 数据库中。这可确保验证性能提示。

http://www.html5rocks.com/en/tutorials/canvas/performance/

为方便起见，我提供了一个有效双缓冲的最小示例，如本文所述。

// canvas element in DOM
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

// buffer canvas
var canvas2 = document.createElement('canvas');
canvas2.width = 150;
canvas2.height = 150;
var context2 = canvas2.getContext('2d');

// create something on the canvas
context2.beginPath();
context2.moveTo(10,10);
context2.lineTo(10,30);
context2.stroke();

//render the buffered canvas onto the original canvas element
context1.drawImage(canvas2, 0, 0);

我测试过的所有浏览器都通过在绘制框架的代码完成之前不重新绘制画布来为您处理这种缓冲。另请参阅 WHATWG 邮件列表：http : //www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

你总是可以这样做 var canvas2 = document.createElement("canvas"); 而不是将它附加到 DOM 中。

只是说，因为你们似乎display:none; 对它如此着迷，对我来说似乎更干净，并且比仅仅拥有一个笨拙的隐形画布更准确地模仿双缓冲方式的想法。

两年多后：

不需要“手动”实现双缓冲。Geary 先生在他的书“HTML5 Canvas”中写到了这一点。

有效减少闪烁使用requestAnimationFrame()！