canvas教程

canvas双缓冲技术

字号+ 作者:H5之家 来源:H5之家 2015-11-03 13:10 我要评论( )

canvas双缓冲技术Posted on 这里的canvas其实已经不仅仅用于HTML5了,在安卓上也有双缓冲技术,所以这里标题只起canvas的双缓冲技术。 双缓冲技术,其实针对的是在画布画图时多次刷新的优化。 比如: 1.画一个圆 2.画一个方块 3.画一个三角 这样每画一次都会

canvas双缓冲技术 Posted on

这里的canvas其实已经不仅仅用于HTML5了,在安卓上也有双缓冲技术,所以这里标题只起canvas的双缓冲技术。

双缓冲技术,其实针对的是在画布画图时多次刷新的优化。

比如:

1.画一个圆

2.画一个方块

3.画一个三角

这样每画一次都会刷新画布。

双缓冲技术说的是,在画到可见画布之前先在一块不可见的画布上画上,然后一次性画到可见画布上。

如果用双缓冲技术就会先把上面的圆,方块,和三角先分别画到一块不可见画布上,最后一次性画到可见画布上,避免可见画布的多次刷新。

 

其实在HTML5里,不用自己去实现一套双缓冲技术了,看如下代码:

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

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

 

安卓版双缓冲技术 [Android 的 SurfaceView 双缓冲应用]

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
m