测试不同浏览器播放canvas动画的平滑程度

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动画的平滑程度越好。

You Browser does not support HTML5 canvas.

下图为代码在Android4.4.4系统，Opera浏览器（版本10.2.3.88208）中的运行截图：

将上述代码在不同设备和浏览器中各测试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;

【欢迎交流】