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?

推荐答案

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

The following helpful link, in addition to showing examples and advantages of using double buffering, shows several other performance tips for using the html5 canvas element. It includes links to jsPerf tests, which aggregate test results across browsers into a Browserscope database. This ensures that the performance tips are verified.

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

为方便起见，我提供了本文中描述的有效双缓冲的最小示例.

For your convenience, I have included a minimal example of effective double buffering as described in the article.

// 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);

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