HTML5 / Canvas是否支持双缓冲？

Question

HTML5 / Canvas是否支持双缓冲？我想做的是在缓冲区上绘制我的图形然后能够将其原样复制到画布上，这样我就可以做动画并避免闪烁。但我找不到这个选项。谁知道我怎么能这样做？

Answer 1

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

一些代码：

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 []'包含两个canvas对象。因此，当您想要开始绘图时，您仍然需要获取上下文：

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