使用HTML5中的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的所有者之伟大!

评论

3 楼 fins 2013-03-29  

honghe 写道

话不能这么说，我现在就需要缓冲绘图，因为canvas重绘的时候需要全部重绘，我绘制的背景图像很耗时，那么就需要存储为一个图片，然后执行其他操作的重绘图像时候绘制这个图片就可以了。

你说的这种和我说的双缓冲不是一个意思.  你这个相当于 cache , 而不是 buffer.

2 楼 honghe 2013-03-13  

话不能这么说，我现在就需要缓冲绘图，因为canvas重绘的时候需要全部重绘，我绘制的背景图像很耗时，那么就需要存储为一个图片，然后执行其他操作的重绘图像时候绘制这个图片就可以了。

1 楼 glee_java 2010-11-11  

收藏...学习了,
正想学习HTML5的东西,希望可以向你学更多东西...谢谢