最近项目闲着没什么事,又想起了canvas, 针对移动端设备默认浏览器,做了点渲染方面效率的测试,手头设备不多(有一些低端机型和pc chrome做对比),现将测试数据分享给大家吧,本想和css3 animation动画一起测试比较一下,发现animation水的不行,效果跟canvas差很多(可能是因为我代码写的不好),webgl还没有普及到移动设备,所以也不做比较了,曾经看过一篇文章drawImage比putImageData效率低,但测试了一下drawImage的性能更好,还请大牛指导。测试使用cocos2dx的dancer做动画,全屏幕刷新,没使用脏矩形刷新,根据动画个数,屏幕缩放大小两方面测试(值为fps):

1 10 50 100 200 500 1000 1 20 50 100 200 500 1000 1 10 50 100 200 500 1000 1 10 50 100 200 500
320*200  V  V  V  V  V  V  V                                          
480*320                V  V  V  V  V  V                            
800*480                              V  V  V  V  V  V  V              
1024*800                                            V  V  V  V  V  V  V
chrome 75 75 75 75 73 46 46 75 73 72 67 62 41 26 61 59 58 56 53 34 20 29 29 29 29 27 21 14
chiwi v88 165 108 55 36 25 12 8 116 83 46 36 23 12 6 61 57 43 30 21 10 6 53 48 35 27 18 6 6
moto ME722 78 55 22 12 8 4 2 76 47 16 11 7 4 2 43 30 17 12 7 4 2 23 23 17 12 8 4 2
iphone 4 61 61 60 58 43 22 12 61 61 61 54 42 22 12 61 61 57 48 38 22 12 49 50 46 39 32 21 12
GALAXY SII 79 60 27 16 14 9 6 77 55 25 14 10 7 4 75 54 26 16 8 6 4 50 37 26 12 8 5 3

做了几张图方便大家对比:

不同分辨率(这里网页缩放使用meta标签适配全屏):

不同机型(chiwi v88为驰为v88,具体配置大家自查吧):

结果iphone必须是最牛的,貌似最高有60fps的渲染限制,以上测试仅供参考(仅仅是渲染部分,没有逻辑代码),希望能帮到大家(^-^)

后附部分代码(有些的不好的地方求指导)注释前部分是putImageData渲染,后部分是使用css3 animation

  1. $(document).ready(function(e)
  2. {
  3. var canvas=document.getElementById("canvas");
  4. var tag = document.getElementById("tag");
  5.  
  6. var sprite_info = {"s":"dance_atlas.png", 'w':85, 'h':120, 'f':[[0, 0], [85, 0], [170, 0], [255, 0], [340, 0], [0, 120], [85, 120], [170, 120], [255, 120], [340, 120], [0, 240], [85, 240], [170, 240], [255, 240]], "fd":[]};
  7.  
  8. var sprites=[];
  9.  
  10. var SPEED = 60;
  11.  
  12. var image_data = null;
  13. var image_ele = new Image();
  14. var data = null;
  15. var timestamp;
  16. var fps = 60;
  17.  
  18. var canvas_width = canvas.width;
  19. var canvas_height = canvas.height;
  20. var canvas_context = canvas.getContext('2d');
  21.  
  22. image_ele.src = sprite_info.s;
  23. image_ele.onload = function()
  24. {
  25. var i = 0;
  26. //getImageData();
  27. while(i<1)
  28. {
  29. createParticles();
  30. i++
  31. }
  32. start();
  33. }
  34.  
  35. function drawloop()
  36. {
  37. updateParticles();
  38. drawParticles();
  39. }
  40.  
  41. /*function putloop()
  42. {
  43. updateParticles();
  44. putParticles();
  45. }*/
  46.  
  47. /*function getImageData()
  48. {
  49. canvas_context.drawImage(image_ele, 0, 0, image_ele.width, image_ele.height);
  50. for(var index = sprite_info.f.length - 1; index > -1; index--)
  51. {
  52. var cf = sprite_info.f[index];
  53. sprite_info.fd[index] = canvas_context.getImageData(cf[0], cf[1], sprite_info.w, sprite_info.h);
  54. }
  55. }*/
  56.  
  57. function createParticles()
  58. {
  59. var sp = Math.floor(Math.random() * SPEED);
  60. sprites.push(
  61. {
  62. x: Math.floor(Math.random() * (canvas_width - sprite_info.w)),
  63. y: Math.floor(Math.random() * (canvas_height - sprite_info.h)),
  64. s: sp,
  65. cs: 0,
  66. i:0
  67. });
  68. }
  69.  
  70. canvas.addEventListener('click',createParticles, false);
  71. canvas.addEventListener('touchstart',createParticles, false);
  72.  
  73. function updateParticles()
  74. {
  75. for(var index = sprites.length - 1; index > -1 ;index--)
  76. {
  77. var sprite = sprites[index];
  78. if(sprite.cs == 0)
  79. {
  80. sprite.cs = sprite.s;
  81. if(sprite.i == sprite_info.f.length - 1)
  82. sprite.i = 0;
  83. else
  84. sprite.i++;
  85. }
  86. else
  87. {
  88. sprite.cs--;
  89. }
  90. }
  91. }
  92.  
  93. function drawParticles()
  94. {
  95. canvas_context.clearRect(0,0,canvas.width,canvas.height);
  96. for(var index = sprites.length - 1; index > -1 ;index--)
  97. {
  98. var sprite = sprites[index];
  99. var frame_i = sprite_info.f[sprite.i];
  100. canvas_context.drawImage(image_ele, frame_i[0], frame_i[1], sprite_info.w, sprite_info.h, sprite.x,sprite.y, sprite_info.w, sprite_info.h);
  101. }
  102. }
  103.  
  104. function putParticles()
  105. {
  106. canvas_context.clearRect(0,0,canvas.width,canvas.height);
  107. for(var index = sprites.length - 1; index > -1 ;index--)
  108. {
  109. var sprite = sprites[index];
  110. var frame_i_d = sprite_info.fd[sprite.i];
  111. canvas_context.putImageData(frame_i_d, sprite.x,sprite.y);
  112. }
  113. }
  114.  
  115. var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(func){setTimeout(func, 0);},
  116. startTime = window.mozAnimationStartTime || Date.now(), fra = 0;
  117.  
  118. function updateProgress(){
  119. drawloop();
  120. var drawStart = (timestamp || Date.now());
  121. fra++;
  122. if(drawStart - startTime > 1000)
  123. {
  124. tag.innerText = "fps:" + fra;
  125. startTime = drawStart;
  126. fra = 0;
  127. }
  128. if (true){
  129. requestAnimationFrame(updateProgress);
  130. }
  131. }
  132.  
  133. function start()
  134. {
  135. requestAnimationFrame(updateProgress);
  136. }
  137.  
  138. /* var pnl = document.getElementById("app");
  139. var SPEED = 10;
  140. var spy = null;
  141. var fps = 60;
  142.  
  143. var r_time = Math.floor((1000 / fps) * 14);
  144.  
  145. function createParticles()
  146. {
  147. var new_dancer = document.createElement("div");
  148. var inner = document.createElement("div");
  149. new_dancer.appendChild(inner);
  150. pnl.appendChild(new_dancer);
  151. new_dancer.style["left"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["width"])[1] * 1 - sprite_info.w)) + 'px';
  152. new_dancer.style["top"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["height"])[1] * 1 - sprite_info.w)) + 'px';
  153. //var sp = Math.floor(Math.random() * SPEED);
  154. inner.style['-webkit-animation-duration'] = r_time + 'ms';
  155. sprites.push(new_dancer);
  156. spy = new_dancer;
  157. }
  158.  
  159. var drawStart, startTime = Date.now(), fra = 0, timestamp;
  160.  
  161. function updateProgress(){
  162. debugger;
  163. var drawStart = (timestamp || Date.now());
  164. fra += 14;
  165. if(drawStart - startTime > 1000)
  166. {
  167. debugger;
  168. tag.innerText = "fps:" + fra;
  169. startTime = drawStart;
  170. fra = 0;
  171. }
  172. }
  173.  
  174. function start()
  175. {
  176. var i = 0;
  177. while(i<100)
  178. {
  179. createParticles();
  180. i++
  181. }
  182. spy.addEventListener("webkitAnimationIteration", updateProgress, false);
  183. }
  184.  
  185. start();*/
  186.  
  187. });

html5 canvas移动设备渲染测试的更多相关文章

  1. 基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器

    前言 今天找到了 HT 的官网里的 Demo 网站( http://www.hightopo.com/demos/index.html ),看的我眼花缭乱,目不暇接. 而且 HT 的用户手册,将例子和 ...

  2. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  3. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  4. 使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡

    中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”.我们被迫面临“世风日下.道德 ...

  5. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  6. 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机weba ...

  7. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  8. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】

    HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...

  9. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

随机推荐

  1. Linux --windows vs

    我其实并不是很清楚我在做什么....希望做完之后可以解答....... 在看了一堆GNU, Clang, GCC, QT, MinGW, CygWin, POSIX 这些概念之后,我觉得我在做的事情就 ...

  2. centos6.5安装图形界面,windows远程linux图形界面

    1. 查询是否已安装图形界面 yum grouplist |more 在grouplist的输出结果中的“Installed Groups:”部分中,如果你能找到“X Window System”和G ...

  3. 最全的dedeCMS标签调用技巧和大全

    1. 页面php方法获取字段  $refObj->Fields['id']; 2. 在页面上使用PHP连接数据库查询 {dede:php} $db = new DedeSql(false); $ ...

  4. PowerDesigner(四)-业务处理模型(转)

    业务处理模型 业务处理模型(Business Process Model,BPM)以业务需求作为出发点,用图形的方式描述系统的任务和业务流程,注重的是处理过程中数据流程.业务处理模型是从业务人员的角度 ...

  5. Http Url Get请求方式需要对中文参数进行编码

    public static void main(String[] args) { try { String mytext = java.net.URLEncoder.encode("上海南站 ...

  6. static_cast和reinterpret_cast

    static_cast和reinterpret_cast 相同点:都是暴力转换,从一个类型转换为另一个类型,对于类指针不会保证安全性   static_cast和reinterpret_cast的区别 ...

  7. PHP READ PPT FILE

    function parsePPT($filename) { // This approach uses detection of the string "chr(0f).Hex_value ...

  8. codeforces 442C C. Artem and Array(有深度的模拟)

    题目 感谢JLGG的指导! 思路: //把数据转换成一条折线,发现有凸有凹 //有凹点,去掉并加上两边的最小值//无凹点,直接加上前(n-2)个的和(升序)//数据太大,要64位//判断凹与否,若一边 ...

  9. Java中常用的加密方法(JDK)

    加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容.大体上分为双向加密和单向加密,而双向加密又分为对称加密和非对称加密(有些 ...

  10. JavaScript基础(一)

    我是一个初学者,但求能学到些许知识!以下是根据韩顺平老师的<轻松搞定网页设计html+css+javascript—javascrip部分>整理而成. 为什么要学习javascript? ...