返回顶部

收藏

使用缓冲提高html5 canvas的绘图性能

更多

在winform绘制控件时有双重缓冲的概念,这种理念也可以用在html5的canvas标签中。

对于负责的html5 canvas绘图我们可以通过在页面的同一个位置放置两个canvas标签,其中一个是隐藏的,另一个是显示给用户的。

在需要绘制时绘制到隐藏的canvas上,绘制完毕再切换两个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;

在上面的js中Buffers数组中有两个canvas元素,可以根据需要绘制到某一个canvas上。

标签:html5,canvas,css,性能优化,javascript

收藏

0人收藏

支持

1

反对

0