canvas在高倍屏下变模糊的处理办法
因为canvas不是矢量图,而是像图片一样是位图模式的。如果不做Retina屏适配的话,例如二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该canvas在Retina屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此图片会变模糊。
因此,要做Retina屏适配,关键是知道当前canvas的实际渲染倍率,然后将canvas放大到该倍率来绘制,最后将canvas压缩成一倍的物理大小来展示。
需要注意的是,canvas中的线条大小、文字大小等都需要乘以该倍率来进行绘制。
canvas的实际渲染倍率
在浏览器的window变量中有一个devicePixelRatio的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素。
在canvas context中也存在一个 webkitBackingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。在iOS6下的safari中的值是2,但是在chrome和iOS7的safari中的值却是1。在iOS6下的safari中,如果有一张100 × 100像素的图片绘制,该图片首先会在内存中生成一张200 × 200的图片,然后再浏览器渲染时会按100 × 100的图片来显示,因此不会出现模糊失真的情况。而在在chrome和iOS7的safari中就会出现模糊。
但是webkitBackingStorePixelRatio属性在各浏览器厂商的获取方式不一样,所以需要加上浏览器前缀来实现兼容。
如下:
var canvas = document.getElementById("canvas"),
context= canvas.getContext("2d");
// 屏幕的设备像素比
var devicePixelRatio = window.devicePixelRatio || 1;
// 浏览器在渲染canvas之前存储画布信息的像素比
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
// canvas的实际渲染倍率
var ratio = devicePixelRatio / backingStoreRatio;
3.2 按实际渲染倍率来缩放canvas
先补充一个基础知识点:
要设置canvas的画布大小,使用的是canvas.width 和 canvas.height;
要设置画布的实际渲染大小,使用的style或CSS设置的 width 和height,只是简单的对画布进行缩放。
譬如:
<canvas width="640" height="800" style="width:320px; height:400px"></canvas>
canvas的实际大小的640px × 800px,但是实际渲染到页面的大小是320px × 400px,相当于缩小一倍来显示。
因此,要使canvas适配高倍屏,就是要将canvas放大到设备像素比来绘制,最后将canvas压缩成一倍的物理大小来展示。如下:
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
canvas中的线条大小、文字大小等都需要乘以设备像素比来进行绘制,否则高倍屏下的线条会变细几倍
canvas在高倍屏下变模糊的处理办法的更多相关文章
- img transform:scale 放大在ios下变模糊
/*img标签放大再缩小*/ img { width: 400%; transform: translate3d(-50%, -50%, 0) scale(0.25, 0.25); -webkit-t ...
- Chrome浏览器在Windows8/8.1下显示模糊的解决办法
刚刚换了一台新电脑,安装完Windows 8.1,屏幕分辨率被自动设置为1920 X 1080,打开Chrome浏览器却发现内容显示非常模糊,不论如何改变Chrome的设置均没有效果,开启或关闭Chr ...
- 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题
点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样 ...
- 【转】解决 canvas 在高清屏中绘制模糊的问题
来源: http://www.css88.com/archives/9297 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片 ...
- canvas压缩图片变模糊问题
canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...
- 解决 canvas 绘图在高清屏中的模糊问题
解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...
- 高清屏下canvas重置尺寸引发的问题
我们知道,清空canvas画布内容有以下两个方法. 第一种方法是cearRect函数: context.cearRect(0,0,canvas.width,canvas.height) 第二种方法就是 ...
- html5 Canvas画图3:1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- iBeacon在iPhone锁屏下有几率扫描不到蓝牙设备以及折中解决方案
前言: 这个问题的确困扰了很久,查了国内外各种论坛.社区,都没找到一个有效的解决办法. 所幸后来用一种折中的办法解决了,但也不是从技术根本上解决的,所以有解决的兄弟还望指导下. 正文如下: 一.需求描 ...
随机推荐
- linux添加新用户
使用root用户adduser yj 后面操作有提示 用这种方法新建的用户会在home下生成用户文件夹
- python中unicode utf-8的互换
比较简单明了,直接上例子 # -*- coding: utf-8 -*- t0 = u'测试' #u'\u6d4b\u8bd5' t1 = '测试' #'\xe6\xb5\x8b\xe8\xaf\x9 ...
- cocos2dx基础篇(24) 场景切换效果CCTransitionScene
[3.x] (1)去掉 "CC" (2)卡牌翻转 TransitionFlip 中的样式 tOrientation // //1: kCCTransitionOri ...
- XSS-反射型
前情提要:html的dom对象:document 如document.cookie / document.write() http://netsecurity.51cto.com/art/20131 ...
- centos没有ifcfg-eth0或者ifcfg-eth0文件内容为空
虚拟机安装好CentOS 6系统后,发现ip在每次重启后都会还原,用ifconfig查看是有eth0网卡的(也有可能只有回环网卡lo),于是查看eth0网卡配置文件,发现在 /etc/sysconfi ...
- Maven从入门到精通(一)
maven是一个项目管理工具,我的后续将会根据这个思维导图给大家由浅到深讲解Maven是如何管理我们的项目,以及我们如何更好的使用Maven maven在开发过程中功能主要有三个方面: 管理依赖 ...
- swagger生成文档初步使用
在大部分情况下,公司都会要求提供详细的接口文档,对于开发来说,文档有时候在赶进度的情况下,也是一件头疼的事.而swagger的自动生成文档功能,就可以帮助我们减少工作量,对于文档的修改也可以在代码中随 ...
- Spring中pom文件所需节点
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- 初步学习jquery学习笔记(六)
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
- 学会这些 pycharm 编程小技巧,编程效率提升 10 倍
PyCharm 是一款非常强大的编写 python 代码的工具.掌握一些小技巧能成倍的提升写代码的效率,本篇介绍几个经常使用的小技巧. 一.分屏展示 当你想同时看到多个文件的时候: 1.右击标签页: ...