HTML5 canvas在retina屏设备上的大小设置

在retina屏幕上制作canvas动画时出现两个问题:1,慢,卡!2,png图片模糊不清!

2014-10-01 09:51:24

ip5s的safari浏览器在展现canvas上的图像时, 为了得到和传统屏幕一样的视觉大小, 会将原始像素放大1倍.(retina屏幕的像素更小,可以理解为4个retina像素表示1个传统像素).
ip5s在进行这种放大时,并不是简单的将1*1像素变成2*2像素, 而是会进行"复杂的放大算法", 目的是得到更加平滑自然(类似抗锯齿)的图像.
虽然这种放大操作是native的,但还是会导致渲染canvas时性能变得极其低下.

在浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素,举例来说,假设devicePixelRatio的值为2,一张100x100像素大小的图片,在retina屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在retina屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。


解决方法,很简单(以iphone 5为例):
将canvas的大小设定为真正的屏幕大小(1136 x 640),再用css将其以devicePixelRatio比例缩小就可以了!


var canvas = document.getElementById('1Canvas');
var ctx = canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;

var ratio = devicePixelRatio / backingStorePixelRatio;
if (devicePixelRatio !== backingStorePixelRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;

canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;

canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';

ctx.scale(ratio, ratio);
}

徜徉于这片废土的我们.....应当去哪里追寻更好的自己?