解决canvas绘图模糊问题

canvas 高dpi下模糊的原因

canvas宽高和样式宽高,如下代码：
html 复制代码
```
 <canvas width="320" height="150" style="width: 320px; height: 150px"></canvas>
```
- width、height代表canvas实际大小，这个大小决定了canvas像素大小
- style width、height 代表css像素（对应设备）
  问题解析:
  如上示例canvas像素为 320 * 150, 在dpi为1的设备上一比一展示是正常的，但是在在retina屏幕下，1个canvas像素（或者说是1个位图像素）将会填充4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊。

解决办法

模糊是像素不够就近取色导致的，所以解决方案就是补充像素，将canvas width、height 扩大dpr倍，里面图形也放大dpr倍，这样在retina屏幕下图形也能一个像素点对应一个像素点

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   div {
     margin-left: 0;
   }
   canvas {background: #eee;}
 </style>
</head>
<body>
 <div>
   <canvas id="myCanvas"></canvas>
 </div>
 <script>
   function setupCanvas(canvas, width, height) {
     // 获取devicePixelRatio， 物理像素/css像素 比
     const dpr = window.devicePixelRatio || 1
     const rate = 1/dpr
     const ctx = canvas.getContext('2d');
     // canvas宽高设置 dpr 倍
     canvas.width = width * dpr;
     canvas.height = height * dpr;
     // canvas放大，内容也放大dpr倍
     ctx.scale(dpr, dpr);
     // 设置指定canvas css宽高
     canvas.style.width = `${width}px`
     canvas.style.height = `${height}px`
     // 或者通过transform 改变canvas css大小
     // 设置canvas transformOrigin
     // canvas.style.transformOrigin = '0px 0px'
     // 由于canvas放大了dpr倍，需要在显示的时候，css缩放为的1/dpr
     // canvas.style.transform = `scale(${rate}, ${rate})`

     return ctx;
   }
   const canvas = document.querySelector('#myCanvas')
   const rect = canvas.getBoundingClientRect();
   const ctx = setupCanvas(canvas, rect.width, rect.height);
   ctx.strokeRect(30,30,100, 100);
   ctx.font = "30px Arial";
   ctx.fillText("Demo!", 35, 85);
 </script>

</body>
</html>

解决canvas绘图模糊问题

相关概念

canvas 高dpi下模糊的原因

参考文档