Canvas无疑是HTML5开放式网络平台最激动人心的技术之一。目前，除了IE8以外，各类浏览器的新版本都支持HTML5 Canvas。

程序员需要通过Javascript调用Canvas API。基本的Canvas API包括一个2D环境，该环境允许程序员绘制各种图形和渲染文本，并将图像显示在浏览器窗口的定义区域。实现Canvas动画时，程序员需要在下一帧渲染前设置屏幕内容，重绘图像以实现动画效果。Canvas动画的实现有点儿像“翻页动画”，在绘本上的每页绘制不同图像，快速翻过时每一帧都连续起来，看上去像动画片。因此对于Canvas来说，如果“浏览器翻页不够快”或者“浏览器播放Canvas不够平滑”，就会出现跳帧的情况，让用户感觉卡壳。

下文将通过一个案例显示不同浏览器播放canvas动画的平滑程度，并分享不同设备及浏览器上的测试数据。

代码框架来源于Anthony T.Holdener和Mario Andres Pagella所著的《深入HTML5应用开发》一书，细部有修正。基本思想是创建一个只有两帧的动画，让浏览器在10秒钟的时间内尽可能绘制，最后计算每秒平均执行的动画帧数。平均帧数越高，则证明浏览器播放Canvas动画的平滑程度越好。

 <!DOCUTYPE HTML>

 <html>

 <head>

 <!--将使用中文在Canvas上绘制文字-->

 <meta charset="gb2312"/>

 <!--设置viewport，保证浏览器在移动设备上读取到Ideal Width-->

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,scalable=0" />

 <title>FPS Test</title>

 <style type="text/css">

 html{height:100%;overflow:hidden;}

 body{height:100%;padding:0px;margin:0px;}

 </style>

 </head>

 <body>

 <!--测试浏览器是否支持Canvas-->

 <canvas id="screen" >You Browser does not support HTML5 canvas.</canvas>

 <script type="text/javascript">

 window.onload = function(){

 var sc=document.getElementById("screen");

 sc.width=document.body.clientWidth;

 sc.height=document.body.clientHeight;

 var g=sc.getContext("2d");

 var fpsArray=[];//新建帧数组，记录浏览器每秒执行帧数

 var fpsRound=0; //新建帧数计算器

 var fps=0;    

 var date=new Date();

 var startTime=Math.round(date.getTime()/1000);//计算自1970年1月1日到目前为止的毫秒数，取整为秒

 draw(startTime);

 function draw(stTime){

 var date=new Date();

 var anotherTime=Math.round(date.getTime()/1000);

 if(stTime!=anotherTime){//是否已进行到下一秒

 fps=fpsRound;

 fpsRound=0;

 fpsArray.push(fps);//结果为是，将浏览器在上一秒执行的帧数插入数组

 }else{

 fpsRound++;//结果为否，继续增加帧数

 }

 //用Canvas绘制简单的黑屏和白屏做为动画的两帧

 g.fillStyle="#000";

 g.fillRect(0,0,sc.width,sc.height);

 g.fillStyle="#fff";

 g.fillRect(0,0,sc.width,sc.height);

 /**测试使用，执行时可以删除

 console.log("当前时间是"+anotherTime);

 console.log("当前帧数为"+fpsRound);**/

 if(anotherTime<(startTime+10)){//浏览器执行10秒钟

 setTimeout(function(){draw(anotherTime)},1);

 }else{

 showResult();

 }

 function showResult(){

 var sum=0;

 var mean=0;

 var a;

 //取得数组数值，从小到大进行排序

 for(var i=0;i<fpsArray.length;i++){

 for(var j=fpsArray.length-1;j>i;j--){

 if(fpsArray[i]>fpsArray[j]){

 a=fpsArray[j];

 fpsArray[j]=fpsArray[i];

 fpsArray[i]=a;

 }

 }

 }

 //排序后显示

 for(var i=0;i<fpsArray.length;i++){console.log("数组的第"+i+"个元素是："+fpsArray[i]);}

 for(var i=0;i<fpsArray.length;i++){sum=sum+fpsArray[i];}

 mean=(sum/10);

 //根据设备屏宽设置文字大小并显示

 var fontSize=0.03*sc.width;

 g.font="italic bold "+fontSize+"px serif";

 g.fillStyle="#000";

 g.fillText("经测试，该浏览器10秒内可执行的帧数总量为:"+sum,40,50);

 g.fillText("经测试，该浏览器每秒平均可执行帧数为"+mean,40,100);

 g.fillText("设备屏宽为:"+sc.width,40,150);

 }

 }

 }

 </script>

 </body>

 </html>
将上述代码在不同设备和浏览器中各测试10次，结果如下（FPS为10秒平均数）：

以上测试结果均为浏览器不发出其他网页请求，仅执行上述代码情况下完成。

Win7系统上，IE11支持Canvas动画的平滑程度最高，其次是Chrome、UC浏览器和FireFox。

Android 4.4.4系统上，Chrome支持Canvas动画的平滑程度最高，其次是Android自带浏览器、FireFox、Opera和UC浏览器。

Ipad 6.1.2系统上，safari对Canvas动画平滑程度的支持要低于Android4.4.4系统上的其他浏览器。

参考文献:

[1] Steve Fulton & Jeff Fulton.HTML5 Canvas 开发详解.[M].O'Reilly Media,Inc.2013;

[2]Anthony T.Holdener & Mario Andres Pagella.深入HTML5应用开发.[M].O'Reilly Media,Inc.2011;

【欢迎交流:) 】

【原创】测试不同浏览器播放canvas动画的平滑程度的更多相关文章

  1. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  2. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  3. Android实现播放GIF动画的强大ImageView

    我个人是比较喜欢逛贴吧的,贴吧里总是会有很多搞笑的动态图片,经常看一看就会感觉欢乐很多,可以释放掉不少平时的压力.确实,比起一张单调的图片,动态图片明显更加的有意思.一般动态图片都是GIF格式的,浏览 ...

  4. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  5. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  6. canvas动画简单操作

    canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...

  7. Android播放gif动画,增加屏幕掉金币效果

    前言:播放gif的版本有很多,我这边使用Android自带的Movie类播放gif动画,也是在别人的基础上进行修改.有同样需求的朋友可以参考我的demo. 1.效果图如下: 2.部分主要代码 Main ...

  8. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  9. HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

    Spine做骨骼动画是比较流行的,使用起来可能相对复杂,但功能毕竟强大,所以市场占有率较大. 在unity.cocos2d.starling中使用spine已经很成熟了,而HTML5这一块可能刚刚起步 ...

随机推荐

  1. solr4.5配置中文分词器mmseg4j

    solr4.x虽然提供了分词器,但不太适合对中文的分词,给大家推荐一个中文分词器mmseg4j mmseg4j的下载地址:https://code.google.com/p/mmseg4j/ 通过以下 ...

  2. metadata lock

    1 锁等待的例子 session 1: 执行查询但不提交 mysql> begin; mysql> select * from test where c2 = '1'; session 2 ...

  3. Android性能调优

    本文主要分享自己在appstore项目中的性能调优点,包括同步改异步.缓存.Layout优化.数据库优化.算法优化.延迟执行等.一.性能瓶颈点整个页面主要由6个Page的ViewPager,每个Pag ...

  4. 1047图的深度优先遍历c语言

    描述 图(graph)是数据结构 G=(V,E),其中V是G中结点的有限非空集合,结点的偶对称为边(edge):E是G中边的有限集合.设V={0,1,2,……,n-1},图中的结点又称为顶点(vert ...

  5. UI特效--Android利用ViewFlipper实现屏幕切换动画效果

    .屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...

  6. alibaba笔试

    1.D  A(7,7)/(A(3,3)A(2,2)) = 420 关联: 字符串的排列和组合:http://blog.csdn.net/hackbuteer1/article/details/7462 ...

  7. 《Python 学习手册4th》 第十三章 while和for循环

    ''' 时间: 9月5日 - 9月30日 要求: 1. 书本内容总结归纳,整理在博客园笔记上传 2. 完成所有课后习题 注:“#” 后加的是备注内容 (每天看42页内容,可以保证月底看完此书) “重点 ...

  8. Mahout踩坑之路

    一.版本对比 公司版Mahout 由于Mahout只能允许于hadoop0.20以上版本上,而百度的hadoop是hadoop0.19的一个分支.因此百度HPC组曾经将Mahout移植到百度的hado ...

  9. 多线程下OpenCV操作的问题

    问题:在OpenCV中,使用cvCaptureFromAVI打开一个视频文件后,并使用cvReleaseCapture释放关闭它后.再开启一个线程使用cvCaptureFromAVI打开一个视频文件, ...

  10. bzoj 1061 [Noi2008]志愿者招募（数学模型，MCMF）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1061 [题意] 雇人满足每天至少需要的人数. [思路一] Byvoid的题解 clic ...