about 2 years ago

肥宅最近也是使用Canvas發現怎麼跑到手機上整個悲劇,一堆怪怪der模糊圖片,

爬了文章發現了這一篇解說如何使Canvas高解析度化。

High DPI Canvas

其實這篇還滿長的,但我有發現有一個偷吃步的方法 >\<

var getPixelRatio = function(context) {
    var backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio || 1;

    return (window.devicePixelRatio || 1) / backingStore;
};

function resizeCanvas() {
    
    var ratio = getPixelRatio(ctx);
  
        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);
}

其實原理就是把目前裝置最高解析度化算出來,其實canvas.width、canvas.style.width這兩種是不同的,

canvas.width這方面是直接定義畫布的大小,然而style.width其實就是放大與縮小畫布,

再加上我們把原先的畫布在使用裝置分辨綠算出來的radtio就會成為這樣啦!

不過對於原理還不是很清楚 >\<

← [Android] How to remove toolbar elevation 如何刪除Toolbar陰影 [Android] LruCache vs DiskLruCache →
 
comments powered by Disqus