一. 事起缘由 最近在用Canvas做社区网站的技能雷达图,如下图所示。 一倍屏下的显示情况:
二倍屏下的显示情况:
正当我很开心的准备发布出去时,用Mac Book 开发的同事跟我说,这简直是糊得不要不要的呀~( ?□? )~。。纳尼可是我的华硕显示十分完美呀,这就十分尴尬了。 猜想是Canvas毕竟类似于位图,在Retina屏下如果不做多倍屏显示处理的话,图片应该会模糊。Google了一翻,果然如此。 二. 问题分析 因为canvas不是矢量图,而是像图片一样是位图模式的。如果不做Retina屏适配的话,例如二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该canvas在Retina屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此图片会变模糊。 因此,要做Retina屏适配,关键是知道当前屏幕的设备像素比,然后将canvas放大到该设备像素比来绘制,然后将canvas压缩到一倍来展示。 三. 解决办法 因此,要做Retina屏适配,关键是知道当前canvas的实际渲染倍率,然后将canvas放大到该倍率来绘制,最后将canvas压缩成一倍的物理大小来展示。 需要注意的是,canvas中的线条大小、文字大小等都需要乘以该倍率来进行绘制。 3.1 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"), // 屏幕的设备像素比 // 浏览器在渲染canvas之前存储画布信息的像素比 // canvas的实际渲染倍率 先补充一个基础知识点: 要设置canvas的画布大小,使用的是canvas.width 和 canvas.height; <canvas width="640" height="800" style="width:320px; height:400px"></canvas> 因此,要使canvas适配高倍屏,就是要将canvas放大到设备像素比来绘制,最后将canvas压缩成一倍的物理大小来展示。如下: canvas.style.width = canvas.width; canvas.width = canvas.width * ratio; 3.3 实际渲染效果: 实际渲染效果如下: 一倍屏下:
二倍屏下:
<canvas width="400" height="240" style="width: 200px; height: 120px;"></canvas> 三倍屏下:
<canvas width="600" height="360" style="width: 200px; height: 120px;"></canvas> 3.4 注意事项 canvas中的线条大小、文字大小等都需要乘以设备像素比来进行绘制,否则高倍屏下的线条会变细几倍 |