javascript - HTML5/Canvas 是否支持双缓冲？

Question

我想做的是在缓冲区上绘制我的图形，然后能够将其原样复制到 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');