为啥图片会模糊，canvas显示优化

图片的原始尺寸，就是图片原始的拍摄或者生成出来的大小

• naturalWidth,原始宽度
• naturalHeight,原始高度

样式尺寸
img标签上的width，height

缩放倍率，受浏览器缩放影响大小，跟操作系统设置也有关系，反正最后就是个值
window.devicePixelRatio

清晰度高满足如下公式
原始尺寸 = 样式尺寸 * 缩放倍率

画一个canvas来试试

/* 样式尺寸 */
.canvas {
  width: 800px;
  height: 800px;
}

// 缩放倍率
const devicePixelRatio = window.devicePixelRatio
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
function drawImg() {
  ctx.clearRect(0,0 canvas.width, canvas.height)
  // 原始尺寸 = 样式尺寸 * 缩放倍率
  canvas.width = 800 * devicePixelRatio
  canvas.height = 800 * devicePixelRatio
  ctx.beginPath()
  const R = 80 * devicePixelRatio
  ctx.arc(canvas.width / 2, canvas.height / 2, R, 0, 2*Math.PI)
  ctx.strokeStyle = 'pink'
  ctx.lineWidth = 10 * devicePixelRatio
  ctx.stroke()
}

drawImg()

window.addEventListener('resize', draw)