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. Linux下利用ioctl函数获取网卡信息

    linux下的ioctl函数原型如下: #include <sys/ioctl.h> int ioctl(int handle, int cmd, [int *argc, int argv ...

  2. HDU 5389 Zero Escape

    题意:有一些人,每人拿一个号码,有两个门,门的值分别为A和B,要求把人分成两堆(可以为空)一堆人手持号码之和的数字根若等于A或者B就可以进入A门或者B门,要求两堆人分别进入不同的门,求有几种分配方式, ...

  3. [Everyday Mathematics]20150106

    (1). 设 $f\in C[0,T]$, $g$ 是 $T$-周期函数, 试证: $$\bex \vlm{n}\int_0^T f(x)g(nx)\rd x=\frac{1}{T}\int_0^T ...

  4. ylbtech-权限管理-数据库设计-功能权限管理技术

    ylbtech-DatabaseDesgin:ylbtech-权限管理-数据库设计-功能权限管理技术 DatabaseName:ylb_permission(权限管理-功能权限管理技术)实现 Type ...

  5. C++中引用的本质是什么?

    一般的教材上讲到引用时,都是说“引用是对象的一个别名”.我认为这种定义是不清晰的,不利于初学者理解引用.至少我自己曾经被这个定义困扰了一段时间.到底什么是“别名”? 实际上,引用的实质是位于xxxxx ...

  6. android 官网处理图片 代码

    /** * 获取压缩后的图片 (官网大图片加载对应代码) * * @param res * @param resId * @param reqWidth * 所需图片压缩尺寸最小宽度 * @param ...

  7. loadrunner 发送gzip压缩json格式（转）

    转:http://blog.csdn.net/gzh0222/article/details/7711281 使用java vuser实现,发送gzip压缩json格式. /* * LoadRunne ...

  8. erp验收测试

    软件测试是为了发现错误而执行程序的过程.它不仅是软件开发阶段的有机组成部分,而且在整个软件工程(即软件定义.设计和开发过程)中占据相当大的比重.软件测试是软件质量保证的关键环节,直接影响着软件的质量评 ...

  9. 数据库表中MAX ID获取,确保每次调用没有重复工具类（NumberUtil）

    下面这个类是获取数据库中一个字段的最大值.配置在数据库中. public class NoFactory { private final static Logger cLogger = Logger. ...

  10. STM32F407 外扩SRAM

    字节控制功能.支持高/低字节控制. 看看实现 IS62WV51216 的访问,需要对 FSMC进行哪些配置. 这里就做一个概括性的讲解.步骤如下: 1)使能 FSMC 时钟,并配置 FSMC 相关的  ...