HTML5/Canvas是否支持双缓冲？
HTML5/Canvas是否支持双缓冲？
提问于 2010-05-09 03:05:10
我想要做的是在一个缓冲区上绘制我的图形，然后能够将它复制到画布上，这样我就可以做动画并避免闪烁。但我找不到这个选项。有人知道我该怎么做吗？
回答 11
Stack Overflow用户
回答已采纳
发布于 2012-04-28 03:56:50
以下有用的链接除了显示使用双缓冲的示例和优点外，还显示了使用html5画布元素的其他几个性能提示。它包括指向jsPerf测试的链接，这些测试将跨浏览器的测试结果聚合到浏览器范围数据库中。这确保了性能提示得到验证。
http://www.html5rocks.com/en/tutorials/canvas/performance/
为了您的方便，我提供了一个有效的双缓冲的最小示例，如本文所述。
// 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);Stack Overflow用户
发布于 2010-05-19 18:09:39
一个非常简单的方法是在同一屏幕位置有两个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[]‘包含两个画布对象。因此，当你想要开始绘图时，你仍然需要获得上下文：
var context = Buffers[DrawingBuffer].getContext('2d');Stack Overflow用户
发布于 2011-02-28 10:54:57
我测试过的所有浏览器都通过在绘制框架的代码完成之前不重新绘制画布来为您处理这种缓冲。另请参阅WHATWG邮件列表：http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2795269
复制相关文章
相似问题