如何锐化 HTML5 画布中的模糊文本？

为了得到这个问题的解决方案，让我们先了解一下为什么会出现这个问题。

这个问题的答案是屏幕的像素。模糊量通常取决于您用来查看画布的浏览器或设备。像素比率因设备而异，因此我们可以看到模糊效果。

问题的解决方法：

我们可以通过使用 window.devicepixelratio 属性来解决这个问题

Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。这个值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。

简单来说，这告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。

让我们看一个不使用 devicePixelRatio 的输出示例：

现在让我们编写一些代码来解决这个问题：

  

    
    
    
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
              //window.devicePixelRatio=1; //Blury Text
        window.devicePixelRatio=2;      //Clear Text
        //(CSS pixels).
              //Display Size
        var size = 150;
        canvas.style.width = size + "px";
        canvas.style.height = size + "px";
  
        var scale = window.devicePixelRatio; 
            
        canvas.width = Math.floor(size * scale);
        canvas.height = Math.floor(size * scale);
  
        //CSS pixels for coordinate systems
        ctx.scale(scale, scale);
        ctx.font = '10px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
  
        var x = size / 2;
        var y = size / 2;
  
        var textString = "GEEKS FOR GEEKS";
        ctx.fillText(textString, x, y);
    
  

输出：

在包含window.devicePixelRatio之后，让我们检查代码的输出：

我们已经假设了这里的两个条件，当我们保持window.devicePixelRatio =1 时，我们会看到模糊效果，但是当我们将值保持为 2 时，我们可以看到我们得到了明文。这是因为值1表示经典的96 DPI（某些平台上为 76 DPI）显示，而HiDPI/Retina 显示的预期值为 2。