位置：首页>> 网络编程>> 网页设计>> 使用HTML5中的canvas进行图形图像.游戏.动画开发时,不需要双缓冲机制

使用HTML5中的canvas进行图形图像.游戏.动画开发时,不需要双缓冲机制

　来源：大城小胖的大城　发布时间：2010-04-01 12:21:00　

标签：游戏,程序,双缓冲,canvas

在开发图像动画游戏相关的程序时, 双缓冲( double-buffer )一直是程序员常用(必用)的技巧.
当然随着各种引擎框架的发展,以及计算机语言本身的进步开发人员已经不需要在亲自去实现了(其实这个实现起来也不复杂)

HTML5中的canvas 为我们使用js在浏览器中进行图形图像以及动画游戏的开发提供了基础保障, 但是它并没有高级到会自动的实现双缓冲, 不过不用担心, 因为它根本不需要双缓冲.

双缓冲最初的本意是为了减少可见屏幕(画布)的刷新次数避免画面闪烁.

在传统语言中如果不使用双缓冲,执行下面的操作:

1 在可见画布上画出一个圆 //系统自动刷新并渲染可见画布
2 在可见画布上画出一个三角 //系统自动刷新并渲染可见画布
3 在可见画布上画出一个方块 //系统自动刷新并渲染可见画布

那么每一步之后显示系统都会刷新一次"可见画布", 也就是说在短短的时间里会刷新多次画布.

使用双缓存之后(多了一个非可见画布,也就是那个缓冲):

1 在非可见画布上画出一个圆
2 在非可见画布上画出一个三角
3 在非可见画布上画出一个方块
4 将非可见画布上的内容一次性画到可见画布上

使用双缓冲后虽然绘画次数多了一次, 但是实际上可见画布的刷新次数变少了可以有效的降低画面闪烁的现象.

而在浏览器中使用canvas时, 没必要使用双缓冲, 因为系统不会在每次绘图之后都立即刷新canvas.

举个例子伪代码.

function a(){
for (var i=0;i<10;i++){
// 在canvas上画一些东西
}
}

当执行函数a时, 虽然对canvas执行了10次的绘图操作,但是并不会刷新和渲染可见画布,而只有当函数执行完成后才会一次性的刷新并渲染出canvas上的东西.
(当然如果你使用了setTimeout那就另当别论了)

网上有一些人用canvas写的游戏内部实现了双缓冲, 其实完全多余的,对性能不仅没有提高还会有一定的降低.

=================================

以上结论只针对 2010年3月23日之前的 canvas和js, 以后如果js 浏览器 canvas有什么变化我不敢保证.

不过即使以后js支持多线程了支持更多NB特性了, 那么我觉得这个双缓冲也是多余的.
这个本来就应该是机器底层操作系统甚至是硬件级别支持的, 顶层编码人员原本就不应该去关注所谓的双缓冲.

=================================

最近正在用 js 和 html5 开发一些东西,
感慨一下 Chrome之威武!
同时在今天这样一个值得纪念的日子里
更要感慨一下Chrome的所有者之伟大!

投稿

使用HTML5中的canvas进行图形图像.游戏.动画开发时,不需要双缓冲机制

猜你喜欢