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. wpa_cli调试工具的使用

    1: run wpa_supplicant first use the following command: wpa_supplicant -Dwext -iwlan0 -C/data/system/ ...

  2. MultiSet

    Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口.Guava中定义的新集合有: Multi ...

  3. 软件测试技术（三）——使用因果图法进行的UI测试

    目标程序 较上次增加两个相同的输入框 使用方法介绍 因果图法 在Introduction to Software Testing by Paul一书中,将软件测试的覆盖标准划分为四类,logical ...

  4. 【STL】帮你复习STL泛型算法 一

    STL泛型算法 #include <iostream> #include <vector> #include <algorithm> #include <it ...

  5. ios游戏开发--cocos2d学习（1）

    学习cocos2d需要一定的编程基础,最好了解objective-c的语法.至于下载和安装的过程网上有很多,这里不多介绍,直接进入项目的学习. 创建一个cocos2d项目,直接运行,效果如图: 左下角 ...

  6. sensor_HAL分析

    http://blog.csdn.net/new_abc/article/details/8971807 http://blog.csdn.net/cs_lht/article/details/817 ...

  7. js笔记--json

    1.什么事json: json是指javascript对象表示法(javascript Object Notation), json是轻量级的文本数据交换格式: json独立于语言: json具有自我 ...

  8. Codeforces 372

    A (被装的袋鼠不可以装的袋鼠)贪心,排序,从n/2分成两部分. B 好一道前缀和的题目. C 标准算法不难想,m^2的算法见http://codeforces.com/blog/entry/9907 ...

  9. Creating Help Pages for ASP.NET Web API -摘自网络

    When you create a web API, it is often useful to create a help page, so that other developers will k ...

  10. Base64编解码(C++版)

    #include <string> using namespace std; class ZBase64 { public:     /*编码     DataByte         [ ...