解決用H5 Canvas繪制的圖片或文字在高清屏下模糊的問題

背景：項目地圖頁面上有海量點，每個點都有不同的指標數值，而且很多點根據分類還用不同的圖片作為背景。因此考慮用H5 Canvas加載圖標png並把數值畫上去，然后把canvas導出圖片url並應用到點標記上。

1、常規繪制：

代碼：

 var image = new Image();
    image.src='../../assets/img/pollution/pollution-province-excellent.png';
    image.onload =()=>{
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        ctx.fillStyle = '#fff';
        ctx.font='14px Arial';

        ctx.fillText('35', 25, 30);
        var image1 = new Image();
        image1.src = canvas.toDataURL();
        var containerNode = document.querySelector('#div1');
        containerNode.append(canvas);
    };

 

 

 數字顯然很模糊。

 

2、根據設備像素比devicePixelRatio來繪制：

（參考MDN官網Canvas API說明：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio）

代碼：

var image = new Image();
image.src='../../assets/img/pollution/pollution-province-excellent.png';
image.onload =()=>{
    var canvas = document.createElement('canvas');
    const {width, height} = image;
    canvas.style.width = width+'px';
    canvas.style.height = height+'px';
    //var scale = window.devicePixelRatio;
    var scale = 2; //我為什么用2，而不用devicePixelRatio數值？因為我的電腦Win10系統設置了自定義縮放比大於devicePixelRatio但小於2（200%）
    canvas.width = Math.floor(width*scale);
    canvas.height = Math.floor(height*scale);
    var ctx = canvas.getContext('2d');
    ctx.scale(scale, scale);//scale>1表示放大，反之表示縮小。即繪制原先1px現在是繪制scale個pixel
　　 //注意繪制內容在scale之后開始
    ctx.drawImage(image, 0, 0);
    ctx.fillStyle = '#ffffff';
    ctx.font='14px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    var x = canvas.width/2;
    var y = canvas.height/2;
    ctx.fillText('35', x/scale, y/scale);//為什么x/y還除以scale，因為畫布實際放大了scale倍，所以x,y繪制的像素也放大了scale，所以再除以scale
    var image1 = new Image();
    image1.src = canvas.toDataURL();
    var containerNode = document.querySelector('#div2');
    containerNode.append(canvas);
};
        

2次繪制的效果對比：