如何解决canvas生成图片显示不清晰问题？

原因

canvas 绘制的图形是位图，即栅格图像或点阵图像，当将它渲染到高清屏时，会被放大，每个像素点会用 devicePixelRatio 的平方个物理像素点来渲染，因此图片会变得模糊。

解决方法：

放大 devicePixelRatio 倍 canvas 的宽高，然后用css在缩小回到你想要的理想像素

function createHDCanvas (w=300,h=150) {
    
    
  var ratio = window.devicePixelRatio || 1;
  var canvas = document.createElement('canvas');
  canvas.width = w * ratio; // 实际渲染像素
  canvas.height = h * ratio; // 实际渲染像素
  canvas.style.width = `${
      
      w}px`; // 控制显示大小
  canvas.style.height = `${
      
      h}px`; // 控制显示大小
  // setTransform() 允许您缩放、旋转、移动并倾斜当前的环境
  canvas.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0);
  return canvas;
}