html优化显示器,iPhone 4中HTML5 Canvas优化Retina屏幕
iPhone4中HTML5 Canvas优化retina屏幕是本文要介绍的内容,随着 iPhone4 的推出, retina屏在移动设备中被越来越广泛的应用。虽然 retina屏给画面的展现带来了***的清晰平滑的效果,却给开发人员带来了一些小小的麻烦。网上针对如何在 retina屏下设计软件 UI 的文章有很多,在这里我不想重复这些内容, 而是想针对 HTML5 canvas 在 retina屏上的应用说一说我的一点心得。
最近业余时间一直在利用HTML5技术开发游戏引擎,一切进行的还算顺利,但是当我在 iPhone4 上测试该引擎时,发现其性能比在 iPod touch 3 上还要低得多。造成这一现象的主要原因就是 retina 屏。
下面先简单说说 retina 屏设备如何处理 canvas 的
iPhone 4 的 Safari 浏览器在展现 canvas 上的图像时,为了得到和传统屏幕一样的视觉大小,会将原始像素放大 1 倍。(retina 屏幕的像素更小,可以理解为 4 个 retina 像素表示 1 个传统像素)。在进行这种放大时,并不是简单的将 1*1 像素变成 2*2 像素,而是会进行"复杂的放大算法",目的是得到更加平滑自然(类似抗锯齿)的图像。虽然这种放大操作是 native 的,但还是会导致渲染 canvas 时性能变得极其低下(可能还有其他原因)。
我们无法人为的控制这种放大操作(禁止放大,或者简化放大算法)。不过我们还是有一些技巧来对 canvas 进行一些优化,从而提高它在 retina 屏幕上的性能。假设我们要在 iPhone 3GS 上做如下操作:
加载一个 50*50 的图片
创建一个 300*300 的 canvas
将这个图片绘制在 canvas 的 (100 , 100)坐标处
(以上单位均为:像素)
下面看一看在 iPhone 4 下如何优化这一个操作:
加载一个 50*50 的图片
将此图片放大1倍,变为 100*100 , 放大操作通过代码来实现,可采用"简单的1变4算法"
创建一个 600*600 的 canvas ( 即,原始的宽高都乘以 2 )
设置该 canvas 的 style.width=300 和 style.height=300 (也就是说 style 的大小仍为原始大小)
将放大的图片 绘制在 canvas的 ( 200 , 200 )坐标处.(即,原始的横纵坐标都乘以 2 )
通过这个方案实现的效果和优化之前以及在 iPhone 3GS 上的效果几乎完全一样(肉眼难以察觉),但是性能却比优化前提高近50% !优化方案中的第 4 步最为关键,其它几步的核心就是"在 2 倍大的 canvas 上绘制 2 倍大的图片"。按理说应该性能更低才对,但是由于 canvas 的 style 大小只是 canvas 的实际大小的一半,一切就变得不同了。
当执行以下代码:
canvas.width=600;
canvas.height=600;
canvas.style.width="300px";
canvas.style.height="300px";
canvas 的实际大小变为了 300*300, 同时 canvas 的坐标系发生了缩放,缩放比为 300/600。也就是说 canvas 上所有的点的大小和坐标都缩小了一半,所以之前 "在 2 倍大的 canvas 上绘制 2 倍大的图片",缩小一半后(这个缩小的算法也是一个复杂的缩小算法)先放大再缩小,于是***相当于什么都没有变。
到这里也许有人会迷糊:先放大再缩小,然后绘制在 iPhone 4 的 retina 屏上,为什么比直接绘制性能高?按道理多了一步操作应该更慢才对。当我们了解了以上每一步的操作后,不妨可以这样理解:
优化前:50*50 像素 通过"复杂的放大算法"转变为 100*100 像素
优化后:50*50 像素通过"简单的放大算法"变为 100*100 像素……100*100 像素通过 "复杂的缩小算法"变为 50*50 像素……50*50 像素通过"复杂的放大算法"转变为 100*100 像素
"复杂的缩小算法" 和 "复杂的放大算法" 两者在 iPhone 4 内部很可能是互为逆操作,于是相互抵消了。所以优化后就是:50*50 像素通过"简单的放大算法"转变为 100*100 像素。姑且这么理解吧。
下面是一个更复杂的示例 http://data.wiyun.com/finscn/retina/test-retina.html,有 iPhone4 或 iPod touch 4 的朋友可以访问一下试试,看看选择优化前和优化后的 FPS 变化。目前根据网友的反馈,优化前为 32 FPS 左右,优化后为 45 FPS 左右。
小结:iPhone4中HTML5 Canvas优化Retina屏幕的内容介绍完了,希望本文对你有所帮助。
转自 http://fins.javaeye.com/blog/903268
【编辑推荐】
【责任编辑:李程站 TEL:(010)68476606】
点赞 0
html优化显示器,iPhone 4中HTML5 Canvas优化Retina屏幕相关推荐
- html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
- html5设计图的状态栏标准高度,HTML5 canvas自适应手机屏幕宽高度大小
本来想使用HTML5的canvas做一个手机小游戏,结果第一步canvas自适应屏幕大小就卡住了: 您的浏览器不支持HTML5 canvas,请换一个浏览器. 本来这段代码也是从网上视频搞到的,但是我 ...
- html5 移动 优化,第四天:HTML5移动站优化技巧 摘自《10天学会移动站SEO》
现在大家基本上做手机网站都是做成HTML5的,因为现在智能手机等移动设备越来越多,几乎全部支持HTML5,那么给网站适配上HTML5的网站就很是必要了.以前的WML网站已经淘汰,而最新的方式就这种最好 ...
- html 自动适应手机屏幕大小,HTML5 canvas自适应手机屏幕大小的一种解决方案
一.最终效果 为了不浪费大家时间,先展示最终效果,看看是不是大家需要的解决方案: 标准分辨率: 其他分辨率的适配情况: 二.需求 1.canvas的内容能全部展示在屏幕上 2.尽量能保证图像不变形 3 ...
- java程序优化快捷键_Java 代码中针对性能优化的总结方案
在一个好的项目中代码优化是永远离不开的话题,如果有充足的时间开发和维护代码,必须考虑每个可以优化的细节,日积月累,项目的质量才会上升,代码优化是绝对有必要的工作.代码优化的主要目的是减少代码块,提升代 ...
- android canvas自适应屏幕,html5 Canvas 如何自适应屏幕大小?
用JS调制屏幕大小. 1.CSS 方面:去掉所有元素的外间距.内边距,html 和 body 宽高设为 100%,canvas 元素 display 设为 block. 2.JS 方面:监听窗口的 r ...
- html5 retina 1像素,HTML5 canvas 在 iPhone 4 retina 屏幕上的优化
HTML5 canvas 在 iPhone 4 retina 屏幕上的优化 mac52ipod· 2011-02-11 阅读数 7793 随着 iPhone4 的推出, retina 屏在移动设备中被 ...
- 【项目实战】Python实现用PSO粒子群优化算法对KMeans聚类模型进行优化项目实战
说明:这是一个机器学习实战项目(附带数据+代码+文档+代码讲解),如需数据+代码+文档+代码讲解可以直接到文章最后获取. 1.项目背景 粒子群优化算法(Particle Swarm optimizat ...
- html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
最新文章
- 博士大佬整理的机器学习算法知识手册 | 附PDF下载
- 【杂谈】一招,同时可视化18个开源框架的网络模型结构和权重
- MetaModelEngine:域模型定义
- php callback 多线程,PHP cURL并发里的callback那行是什么效能
- vs 配置 .pdb
- 19n20c的参数_供应IC芯片 745653-3 329056 品牌、价格、PDF参数 - 电子产品资料
- 2019年平安夜,祝福大总结
- c++ map查找key
- 苹果计算机音频无法使用,苹果电脑没声音了怎么回事
- 硬核干货 | 人大金仓数据库产品体系合集
- Java标准I/O流编程一览笔录
- 异步加载loading
- Cocos2d-x之TileMap
- ubuntu安装ActiveMQ
- 如何批量压缩pdf文件到最小
- 微型计算机的一般工作过程,微型计算机的基本工作原理
- win 二进制门安装mysql_MySQL5.7 windows二进制安装教程
- php递归分组,PHP递归实现无限级分类
- vs code连接服务器卡在Downloading with wget
- winform combobox背景色自定义
热门文章
- python语言运用答案_智慧树Python语言应用答案,知到网课章节期末考试Python语言应用答案...
- 水舞灯光秀在城市建设中有哪些作用呢
- 软件测试缺陷等级划分
- MybatisPlus实现高效的多对多查询
- 小高斯与老师的故事,我觉得老师数学功底完爆小高斯一条街。
- COBOL非常见知识点一
- 基于深度学习的表情识别系统(中英文版本)
- 服务器开机显示mm,【分享】mmrecov到新的服务器后,启动RPC服务的问题
- bert tokenizer
- 【2021-08-04】GAB 加速乐 (分析+代码)