canvas教程

HTML5中Canvas画布使用性能技巧(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-20 15:11 我要评论( )

八.像素级别操作尽量用整数 几种取整数的方法: rounded = (0.5 + somenum) 0; rounded = ~ ~(0.5 + somenum); rounded = (0.5 + somenum) 0; 九.使用Jscex制作动画效果 var drawAsync = eval(Jscex.compile("async


八.像素级别操作尽量用整数
几种取整数的方法:
      rounded = (0.5 + somenum) 0;
      rounded = ~ ~(0.5 + somenum);
      rounded = (0.5 + somenum) << 0;


九.使用Jscex制作动画效果
     var drawAsync = eval(Jscex.compile("async", function () {
          while (true) {
              context.drawImage(m_canvas, 0, 0);
              $await(Jscex.Async.sleep(1000));
          }
      }))
      drawAsync().start();


十.其他
与渲染无关的计算交给worker
复杂的计算交给引擎(自己写,或者用开源的),比如3D、物理
缓存load好的图片,canvas上画canvas,而不是画image;

 

以上十点为大家总结在html5使用canvas中所需要注意的性能技巧,这些能够方便的为大家提高html5中canvas的性能技巧,供大家参考学习

 

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

相关文章
  • HTML5 canvas随机画线和小方块基础反弹运动实例

    HTML5 canvas随机画线和小方块基础反弹运动实例

    2017-04-21 16:07

  • 可创建gooey效果抖动窗口的jquery插件

    可创建gooey效果抖动窗口的jquery插件

    2017-04-15 10:00

  • HTML5 Canvas绘制圆点虚线实例_html5教程技巧

    HTML5 Canvas绘制圆点虚线实例_html5教程技巧

    2017-04-13 10:01

  • HTML5资料by html5zhijia.com

    HTML5资料by html5zhijia.com

    2017-04-10 12:07

网友点评
a