HTML5 / Canvas支持双缓冲吗？ [英] Does HTML5/Canvas Support Double Buffering?

问题描述

我想要做的是在缓冲区上绘制我的图形，然后可以将其复制到画布上，这样我就可以做动画，避免闪烁。但我找不到这个选项。

What I'd like to do is draw my graphics on a buffer and then be able to copy it as is to the canvas so I can do animation and avoid flickering. But I couldn't find this option. Anyone know how I can go about this?

推荐答案

一个非常简单的方法是在同一个屏幕位置有两个canvas元素并设置您需要显示的缓冲区的可见性。

A very simple method is to have two canvas-elements at the same screen location and set visibility for the buffer that you need to show. Draw on the hidden and flip when you are done.

一些代码：

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 []保存两个画布对象。所以当你想开始绘制你仍然需要得到上下文：

In this code the array 'Buffers[]' holds both canvas-objects. So when you want to start drawing you still need to get the context:

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

这篇关于HTML5 / Canvas支持双缓冲吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！