canvas教程

提高canvas性能技巧

字号+ 作者:H5之家 来源:H5之家 2017-07-02 14:00 我要评论( )

参考文章: http://codetheory.in/optimizing-html5-canvas-to-improve-your-game-performance/ http://www.html5rocks.com/en/tutorials/canvas/performance/

提高canvas性能技巧

参考文章:


【总结】

1)少用drawImage,能将多张图拼成一张,尽量多拼;

2)drawImage的时候,用上全部参数,也就是用上sprite技术;

3)只做少量的,必要的碰撞检测;

4)使用整型,少用浮点型;

5)让动画基于时间,别基于帧,帧不可靠,基于时间可以更平滑;

6)文本绘制的成本很高;

7)使用预渲染技术,将需要反复绘制的东西预渲染到看不见的canvas上,再从它上面渲染至显示用的canvas上,预渲染用的canvas大小不宜过大,不然它的开销太大,得不偿失。也就是说,预渲染用的canvas不宜使用sprite技术;

8)在路径方面,合并多个路径一次绘出来,不要多次绘制零散的路径;

9)改变context上下文的成本比较高,在相同的上下文下尽量将相同的事情做完,再做另一件事,不要频繁切换上下文;

10)用多个canvas,分别绘制不同的图层,不同图层可以有不同的fps;

11)避免使用阴影;



● html5● 游戏开发

 

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

相关文章
  • html5 Canvas裁剪图片

    html5 Canvas裁剪图片

    2017-07-02 14:04

  • HTML5 canvas学习的实例介绍

    HTML5 canvas学习的实例介绍

    2017-07-01 18:00

  • HTML5 手势检测原理和前端代码实现

    HTML5 手势检测原理和前端代码实现

    2017-07-01 16:04

  • JavaScript html5 canvas画布中删除一个块区域的方法

    JavaScript html5 canvas画布中删除一个块区域的方法

    2017-06-30 12:05

网友点评