HTML5/Canvas поддерживает Двойную буферизацию?
То, что я хотел бы сделать, является ничьей моя графика на буфере и затем смочь скопировать его, как к холсту, таким образом, я могу сделать анимацию и постараться не мерцать. Но я не мог найти эту опцию. Кто-либо знает, как я могу пойти об этом?
2 ответа
Вместо того, чтобы кататься самостоятельно, вы, вероятно, лучше всего воспользуетесь существующей библиотекой для создания чистой и немерцающей анимации JavaScript:
Вот популярный: http://processingjs.org
Очень простой метод - разместить два элемента холста в одном месте экрана и установить видимость буфера, который вам нужно показать. Нарисуйте скрытое и переверните, когда закончите.
Немного кода:
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');