Google Code Prettify

2012年9月20日 星期四

解決canvas在行動裝置上模糊的問題

在高解析度的行動裝置上畫圖,一直會有模糊的問題

可以參考 http://www.html5rocks.com/en/tutorials/canvas/hidpi/

javascript 如下:


var devicePixelRatio = window.devicePixelRatio || 1,
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,

var ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {

        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';
}

沒有留言: