关于canvas在retina屏下绘制文字或图像模糊的解决方案
一、问题描述
最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案。有兴趣的同学可以去读一下原文,我在这里简单的记录一下。
先看一下Deom页面,对比一下前后两个效果,请务必在配有retina屏幕的设备上浏览(iOS6下的safari除外)。否则是看不到效果的。
二、问题分析
熟悉retina屏的同学应该都知道,在浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素,举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。
知道了这一点,关于canvas的问题也就容易理解了。我们可以把canvas当成是一张图片,当浏览器去渲染canvas的时候,他会用2个像素点的宽度去渲染canvas,因此在大多数retina设备的浏览器中会出现绘制的图片或文字变模糊的情况。
请注意,我说的是大多数,难道还有例外?
没错,在iOS6下的safari会正常显示。
看来,我们需要再往深了刨。
在window中有一个devicePixelRatio的属性,类似的,在canvas context中也存在一个webkitBackingStorePixelRatio的属性(仅safari和chrome),该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。在iOS6下的safari中的值是2,因此,如果将一张100x100像素的图片绘制到safari中,该图片首先会在内存中生成一张200x200的图片,然后浏览器渲染的时候,会按100x100的图片来渲染,因此就变成了200x200,正好和内存中的图片大小一致,因此在iOS的safari中不会出现失真的问题。但是在chrome和iOS7的safari中却出现了失真,其原因是,chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。值得一提的是在iOS7中,苹果把webkitBackingStorePixelRatio的值置为了1,目的是处于性能的考虑,这一点在WWDC 2013中找到,感兴趣的同学可以异步What’s New in Safari and WebKit for Web Developers,搜索关键字‘backing’。
三、如何解决
扯了半天,还没有说怎么解决呢。其实方案很简单,也很容易明白。我们可以创建一个两倍于实际大小的canvas,然后用css样式把canvas限定在实际的大小。具体实现方法可以参看我Demo中的代码,或者直接使用github上的这个polyfill。
相关HTML5canvas绘制图片模糊的其他问题:https://segmentfault.com/q/1010000002391424/a-1020000002391631
关于canvas在retina屏下绘制文字或图像模糊的解决方案相关推荐
- emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景 解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
- emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景 解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
- qt char*转int_Qt在Linux下绘制文字原理-使用FreeType来绘制字形
原文链接 Qt源码那些事儿-Qt绘制文字原理_使用FreeType来绘制字形www.cryfeifei.cn 前言 Qt在Linux绘制字体是使用的FreeType. FreeType是一个用C语言 ...
- 关于duilib在Layered Window下绘制文字不正常的BUG
最近在做一个小玩具,C++上面实在是没什么好用的或者轻量级的开源DUI库了,duilib算是比较出名的一个,不过这玩意好几年没人维护,之前据说pc微信也用过这个开发,所以有意试试.用了一段时间感觉,这 ...
- canvas在path路径上绘制文字
1.代码及解释如下: public class Main3Activity extends Activity {@Overrideprotected void onCreate(Bundle save ...
- canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
前提条件 假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊.那么我们首先要准备一张 600 x 180的图片,处理过高清屏的同学应该会有这方面的经验. 问 ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
- html优化显示器,iPhone 4中HTML5 Canvas优化Retina屏幕
iPhone4中HTML5 Canvas优化retina屏幕是本文要介绍的内容,随着 iPhone4 的推出, retina屏在移动设备中被越来越广泛的应用.虽然 retina屏给画面的展现带来了** ...
- 高清屏下canvas绘制文字模糊
在浏览器的 window 对象中有一个 devicePixelRatio的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素. 举例来说,假设devicePixelRa ...
最新文章
- java 登录下线_java web中Listener的实现(实现用户在线统计数量和强制用户下线)...
- feign.RetryableException null executing post
- 360计算机报名支付不了,为什么我的电脑使用360浏览器后无法登陆网...
- 让程序员设计界面的后果
- PCA主成分分析实战和可视化 | 附R代码和测试数据
- php 获取上个月、下个月、本月的日期 当前月份的前后一个月
- 项目开发中如何提升团队的战力?
- [分享]Java 线程池的原理与实现
- 编程之美 4.7蚂蚁爬杆
- Kotlin与Android能做什么?答:Android开发优先语言
- perl软件使用报错总结
- 【转载】SAP Smartform A5 针式打印机 打印格式横向问题
- csf安装及命令参数
- 关于 reached end of file while parsing
- Android APP连接 MySQL
- 南丁格尔玫瑰图 With ggplot2【R语言】
- AUTOCAD——减少样条曲线控制点数、CAD进阶练习(三)
- 终于可以舒服的看电子书了
- java中计算一段时间内白天的时间和夜晚的时间
- 解决-最新版Google谷歌浏览器上传下载卡死无响应-问题
热门文章
- android 活体识别人脸动作活体静默活体Demo源码实现讲解
- 如何将 Outlook PST 文件内容导入 Gmail
- 振动采集卡测试示例及说明
- 无线433发送接收数据测试程序原理,有杂波解决方案
- 考研英语 - word-list-46
- python简单实现pdf格式转换器
- 自动化运维-Ansible 运维自动化 ( 配置管理工具 )
- 2008游戏服务器系统下,Linux系统下玩经典游戏 CS1.5服务器架设
- 内存(RAM或ROM)和FLASH存储的真正区别总结
- 资管软件源码|信管家软件源码|通达信陪资|博易大师软件