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. 去除 waring Method 'CreateNew' hides virtual method of base type 'TCustomForm'

    最近整理前人的代码,有好多的hint和waring, 其中整理到Method 'CreateNew' hides virtual method of base type 'TCustomForm', ...

  2. Ecshop ajax 局部刷新购物车功能

    1.比如我们category.dwt 里有 <a href='flow.php'><SPAN id='cart_count_all'>{insert name='cart_in ...

  3. codeforces 679A Bear and Prime 100 交互

    第一次交互题,记录一下吧 #include <cstdio> #include <iostream> #include <ctime> #include <v ...

  4. openfl关于windows平台编译报错解决办法

    报错信息:  无法打开程序数据库“e:\newproj\mainclient\bin\windows\cpp\obj\obj\msvc-debug-ncxp\vc.pdb”:如果要将多个 CL.EXE ...

  5. POI 读取Excel文档中的数据——兼容Excel2003和Excel2007

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. HSSF - 提供读写Microsoft Exce ...

  6. Python 核心数据类型

    1.Python中一切皆对象 2.Python中不需要申明对象类型,对象的类型由运行的表达式决定 3.创建了对象意味着绑定了对象的操作到此对象,也就是在固有的对象上只能调用该对象特有的操作.比如只能将 ...

  7. 瞬间从IT屌丝变大神——命名规则

    为了避免命名冲突,命名规则如下: 公共组件因为高度重用,,命名从简,不要加前缀. 各栏目的相应代码,需加前缀,前缀为工程师姓名拼音的首字母,例如:海子前缀为“hz_”,分隔符为下划线"_&q ...

  8. [Hive - LanguageManual] Select base use

    Select Syntax WHERE Clause ALL and DISTINCT Clauses Partition Based Queries HAVING Clause LIMIT Clau ...

  9. ubuntu java jdk安装及环境变量设置

    1.下载jdk1.7.0_79 (32位操作系统)jdk-7u79-linux-i586.tar.gz (64位操作系统)jdk-7u79-linux-x64.tar.gz http://www.or ...

  10. HDU4861:Couple doubi（费马小定理）

    题意: 给出k个球和质数p,对每个球以公式val(i)=1^i+2^i+...+(p-1)^i (mod p)计算出它的价值,然后两个人轮流拿,最后拿到的球的总价值大的获胜,问我们先手是否获胜. 我们 ...