html5 canvas移动设备渲染测试
最近项目闲着没什么事,又想起了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 | 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
- $(document).ready(function(e)
- {
- var canvas=document.getElementById("canvas");
- var tag = document.getElementById("tag");
- 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":[]};
- var sprites=[];
- var SPEED = 60;
- var image_data = null;
- var image_ele = new Image();
- var data = null;
- var timestamp;
- var fps = 60;
- var canvas_width = canvas.width;
- var canvas_height = canvas.height;
- var canvas_context = canvas.getContext('2d');
- image_ele.src = sprite_info.s;
- image_ele.onload = function()
- {
- var i = 0;
- //getImageData();
- while(i<1)
- {
- createParticles();
- i++
- }
- start();
- }
- function drawloop()
- {
- updateParticles();
- drawParticles();
- }
- /*function putloop()
- {
- updateParticles();
- putParticles();
- }*/
- /*function getImageData()
- {
- canvas_context.drawImage(image_ele, 0, 0, image_ele.width, image_ele.height);
- for(var index = sprite_info.f.length - 1; index > -1; index--)
- {
- var cf = sprite_info.f[index];
- sprite_info.fd[index] = canvas_context.getImageData(cf[0], cf[1], sprite_info.w, sprite_info.h);
- }
- }*/
- function createParticles()
- {
- var sp = Math.floor(Math.random() * SPEED);
- sprites.push(
- {
- x: Math.floor(Math.random() * (canvas_width - sprite_info.w)),
- y: Math.floor(Math.random() * (canvas_height - sprite_info.h)),
- s: sp,
- cs: 0,
- i:0
- });
- }
- canvas.addEventListener('click',createParticles, false);
- canvas.addEventListener('touchstart',createParticles, false);
- function updateParticles()
- {
- for(var index = sprites.length - 1; index > -1 ;index--)
- {
- var sprite = sprites[index];
- if(sprite.cs == 0)
- {
- sprite.cs = sprite.s;
- if(sprite.i == sprite_info.f.length - 1)
- sprite.i = 0;
- else
- sprite.i++;
- }
- else
- {
- sprite.cs--;
- }
- }
- }
- function drawParticles()
- {
- canvas_context.clearRect(0,0,canvas.width,canvas.height);
- for(var index = sprites.length - 1; index > -1 ;index--)
- {
- var sprite = sprites[index];
- var frame_i = sprite_info.f[sprite.i];
- 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);
- }
- }
- function putParticles()
- {
- canvas_context.clearRect(0,0,canvas.width,canvas.height);
- for(var index = sprites.length - 1; index > -1 ;index--)
- {
- var sprite = sprites[index];
- var frame_i_d = sprite_info.fd[sprite.i];
- canvas_context.putImageData(frame_i_d, sprite.x,sprite.y);
- }
- }
- var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(func){setTimeout(func, 0);},
- startTime = window.mozAnimationStartTime || Date.now(), fra = 0;
- function updateProgress(){
- drawloop();
- var drawStart = (timestamp || Date.now());
- fra++;
- if(drawStart - startTime > 1000)
- {
- tag.innerText = "fps:" + fra;
- startTime = drawStart;
- fra = 0;
- }
- if (true){
- requestAnimationFrame(updateProgress);
- }
- }
- function start()
- {
- requestAnimationFrame(updateProgress);
- }
- /* var pnl = document.getElementById("app");
- var SPEED = 10;
- var spy = null;
- var fps = 60;
- var r_time = Math.floor((1000 / fps) * 14);
- function createParticles()
- {
- var new_dancer = document.createElement("div");
- var inner = document.createElement("div");
- new_dancer.appendChild(inner);
- pnl.appendChild(new_dancer);
- new_dancer.style["left"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["width"])[1] * 1 - sprite_info.w)) + 'px';
- new_dancer.style["top"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["height"])[1] * 1 - sprite_info.w)) + 'px';
- //var sp = Math.floor(Math.random() * SPEED);
- inner.style['-webkit-animation-duration'] = r_time + 'ms';
- sprites.push(new_dancer);
- spy = new_dancer;
- }
- var drawStart, startTime = Date.now(), fra = 0, timestamp;
- function updateProgress(){
- debugger;
- var drawStart = (timestamp || Date.now());
- fra += 14;
- if(drawStart - startTime > 1000)
- {
- debugger;
- tag.innerText = "fps:" + fra;
- startTime = drawStart;
- fra = 0;
- }
- }
- function start()
- {
- var i = 0;
- while(i<100)
- {
- createParticles();
- i++
- }
- spy.addEventListener("webkitAnimationIteration", updateProgress, false);
- }
- start();*/
- });
html5 canvas移动设备渲染测试的更多相关文章
- 基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器
前言 今天找到了 HT 的官网里的 Demo 网站( http://www.hightopo.com/demos/index.html ),看的我眼花缭乱,目不暇接. 而且 HT 的用户手册,将例子和 ...
- 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统
前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...
- 提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...
- 使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡
中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”.我们被迫面临“世风日下.道德 ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸
/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机weba ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】
HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
随机推荐
- Linux --windows vs
我其实并不是很清楚我在做什么....希望做完之后可以解答....... 在看了一堆GNU, Clang, GCC, QT, MinGW, CygWin, POSIX 这些概念之后,我觉得我在做的事情就 ...
- centos6.5安装图形界面,windows远程linux图形界面
1. 查询是否已安装图形界面 yum grouplist |more 在grouplist的输出结果中的“Installed Groups:”部分中,如果你能找到“X Window System”和G ...
- 最全的dedeCMS标签调用技巧和大全
1. 页面php方法获取字段 $refObj->Fields['id']; 2. 在页面上使用PHP连接数据库查询 {dede:php} $db = new DedeSql(false); $ ...
- PowerDesigner(四)-业务处理模型(转)
业务处理模型 业务处理模型(Business Process Model,BPM)以业务需求作为出发点,用图形的方式描述系统的任务和业务流程,注重的是处理过程中数据流程.业务处理模型是从业务人员的角度 ...
- Http Url Get请求方式需要对中文参数进行编码
public static void main(String[] args) { try { String mytext = java.net.URLEncoder.encode("上海南站 ...
- static_cast和reinterpret_cast
static_cast和reinterpret_cast 相同点:都是暴力转换,从一个类型转换为另一个类型,对于类指针不会保证安全性 static_cast和reinterpret_cast的区别 ...
- PHP READ PPT FILE
function parsePPT($filename) { // This approach uses detection of the string "chr(0f).Hex_value ...
- codeforces 442C C. Artem and Array(有深度的模拟)
题目 感谢JLGG的指导! 思路: //把数据转换成一条折线,发现有凸有凹 //有凹点,去掉并加上两边的最小值//无凹点,直接加上前(n-2)个的和(升序)//数据太大,要64位//判断凹与否,若一边 ...
- Java中常用的加密方法(JDK)
加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容.大体上分为双向加密和单向加密,而双向加密又分为对称加密和非对称加密(有些 ...
- JavaScript基础(一)
我是一个初学者,但求能学到些许知识!以下是根据韩顺平老师的<轻松搞定网页设计html+css+javascript—javascrip部分>整理而成. 为什么要学习javascript? ...