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. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  2. android学习笔记五

    Android中的category大全 Api Level 3(SDK 1.5)和Api Level 4(SDK 1.6): android.intent.category.ALTERNATIVE a ...

  3. XA事务处理

    XA接口详解 X/Open XA接口是双向的系统接口,在事务管理器(Transaction Manager)以及一个或多个资源管理器(Resource Manager)之间形成通信桥梁.事务管理器控制 ...

  4. (原创)LAMP教程3-下载centos6.4

    (原创)LAMP教程3-下载centos6.4 今天我要给大家讲的是安装CentOS-6.4-x86_64,是的没有错,就是64位的,因为我的机子是4G的内存,安装64位的centos是绰绰有余啊,但 ...

  5. LeetCode题解——Container With Most Water

    题目: x轴上有一些点,每个点上有一条与x轴垂直的线(线的下端就是这个点,不超出x轴),给出每条线的高度,求这些线与x轴组成的最大面积. 解法: 贪心策略,维持两个指针,分别指向第一个和最后一个元素, ...

  6. Codevs No.1287 矩阵乘法

    2016-06-01 16:53:23 题目链接: 矩阵乘法 (Codevs No.1287) 题目大意: 给你两个可乘矩阵a,b,求a*b 解法: 定义....... //矩阵乘法 (Codevs ...

  7. Java并发控制机制详解

    在一般性开发中,笔者经常看到很多同学在对待java并发开发模型中只会使用一些基础的方法.比如Volatile,synchronized.像Lock和atomic这类高级并发包很多人并不经常使用.我想大 ...

  8. 第二百九十、一、二天 how can I 坚持

    上周日,腊八,好冷,去菏泽了.坐火车,没座.好冷,下午菏泽学院,大体看了看,很是怀念,有点遗憾,在网吧玩的时间太长了,留不住. 周一,长太婚礼,竟然没有只是吃了个饭,有点小失望,下午坐车回京,两点坐的 ...

  9. Spark生态之Spark Graphx

  10. PC问题-可以PING通IP，PING名字不通，可以远程，但不能访问共享文件夹？

    问题现象:可以PING通IP,PING名字不通,可以远程,但不能访问共享文件夹? 问题原因:目标主机中NetLogon服务未启动. 问题处理:远程打开目标主机,“我的电脑-管理-服务-启动(改为自动) ...