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中的线条大小、文字大小等都需要乘以设备像素比来进行绘制,否则高倍屏下的线条会变细几倍
最新文章
- 利用ngxtop实时监控nginx的访问情况
- Java Web页面跳转
- 【iCore3 双核心板】例程二十三:LAN_HTTP实验——网页服务器
- C#中的函数式编程
- 搭建WP8开发环境
- 几种常用的Java数据源解决方案
- oracle 与sql server 部分内置函数替换
- 【高德地图API】从头德国高中生JS API(三)覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖
- CSS3 选择器读解
- Java基础知识二次学习--第三章 面向对象
- pix2code:从截图生成图形用户界面代码
- 为什么使用 Redis 及其产品定位
- web移动端开发技巧
- Linux利用mysql建立数据库
- Redis学习第六课:Redis ZSet类型及操作
- 【ES】学习8-聚合1
- bs-loading
- 面试题:应用中很多jar包,比如spring、mybatis、redis等等,各自用的日志系统各异,怎么用slf4j统一输出?(上)
- 一个java高级工程师的进阶之路【转】
- 97 条 Linux 常用命令及Vim命令总结