关于Canvas模糊的问题
前言:当我在几个多月前,第一次在移动设备上使用canvas绘制内容的时候,我惊然地发现我绘制的图片以及文字居然都是模糊的!我的内心几乎是崩溃的,因为那是我第一个使用canvas的项目,是一个基于微信端的音乐同步消除文字的HTML5小游戏。由于性能上要过关,所以那次我才决定要把canvas搬上战场的。虽然那次的文字是模糊的,但项目还是上线了。我不甘心,所以那时我一连几周都在抽时间研究解决方案。那么问题来了,为什么canvas绘制的内容会在移动设备(视网膜屏幕)上显示模糊呢?在解答这个问题之前,先提出以下几个问题:
问题一:什么是视网膜屏幕?
根据百科资料解释,视网膜屏幕是指分辨率超过人眼识别极限的高分辨率屏幕。而人在一定距离时观察屏幕,只要每英寸长度所能够排列的像素(ppi)的数目超过了300个,人眼就无法识别了。现在我们使用的大部分移动设备屏幕都是视网膜屏幕,也就是将非常多数量的物理像素点压缩在一个相对很小的屏幕之中。
问题二:什么是设备像素比?
设备像素比其实也就是devicePixelRatio,它是物理像素和设备独立像素device-independent pixels (dips)之间的比值。由于视网膜屏都是具有很高的PPI,所以往往物理像素都会比设备的独立像素要大。移动设备上兼容性良好,Chrome,Safari和UC等,基本上是基于Webkit的浏览器都支持,但IE和FF一些老版本不支持。以下是window.devicePixelRatio的支持情况:

它是一个只读属性,浏览器的支持度还是很高的。移动端基本上全面支持,就连安卓2.1和Safari3.1都支持,只有IE10及以下不支持。
关于Canvas模糊的问题的更多相关文章
- canvas模糊事件处理
不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...
- vue实现pdf导出,解决生成canvas模糊等问题
最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --sa ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- FireMonkey 绘图(1)
FireMonkey 绘图(1) FMX 的 Canvas 在不同的系统上会分别使用:WinVista.Win7: D2D (FMX.Canvas.D2D.pas)WinXP: GDI+ (FMX.C ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- html5 Canvas画图3:1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- 使用 canvas 画图时图像文字模糊的解决办法
最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...
- 解决 canvas 绘图在高清屏中的模糊问题
解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...
随机推荐
- PL/SQL异常处理
As we all known,程序的错误一般分为两类:编译错误和运行时错误.其中运行时错误被称为异常.PL/SQL语句块中处理异常的部分即为异常处理部分.在异常处理部分,可以指定当特定异常发生时所采 ...
- c#基础之长度可变类型相同的参数列表
为了简化编码,c#提供了一个特殊的关键字params,允许在调用方法时提供数量可变的实参,而不是由方法实现固定好的形参数量.先看代码吧. using System; using System.Linq ...
- 再次用CodeIgniter实现简易blog
天变冷了,人也变得懒了不少,由于工作的需要,最近一直在学习CodeIgniter(CI)框架的使用,没有系统的从PHP基本语法学起,在网上靠百度谷歌,东拼西凑的实现了一些简单的功能.所以,老PHPer ...
- 应用 CSS3 动画实现12种风格的通知提示
今天我们想分享几个简单的款式的网站通知效果.有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏.各个网站的通知样式和效果千篇一律,难得出现创意的通知效果.这里是实现一个应用 CSS3 ...
- 配置Hibernate二级缓存时,不能初始化RegionFactory的解决办法
配置Hibernate 二级缓存时,出现以下bug提示: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder&quo ...
- Windows Azure HandBook (4) 分析Windows Azure如何处理Session
<Windows Azure Platform 系列文章目录> 本文是对笔者之前的文章Windows Azure Cloud Service (13) 多个VM Instance场景下如何 ...
- 简单设置,解决使用webpack前后端跨域发送cookie的问题
最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项 ...
- IIS各个版本中你需要知道的那些事儿
一.写在前面 目前市面上所用的IIS版本估计都是>=6.0的.所以我们主要以下面三个版本进行讲解 服务器版本 IIS默认版本 server2003 6.0 server2008 7.0 serv ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 使用Microsoft Fakes进行单元测试(2)
接上一篇使用Microsoft Fakes进行单元测试(1) 下面进行Shim的演示. 2.使用Shim替换静态方法 假设我们需要一个工具方法用来格式化当前时间为字符串,因为DateTime.Now一 ...