canvas清晰度处理

在使用 canvas 元素画图或其他操作时，可能会遇到图像模糊的情况，这很有可能是 canvas 的宽、高属性与图像的宽、高属性之间没有进行合理的设置，使两者之间没有达到平衡关系导致的。

解决方法

解决 canvas 图像清晰度的方法首先需要理解以下几个概念：

• el.naturalWidth/naturalHeight(width/height)：图像的自然尺寸（或者叫原始尺寸），表示图像自身的 css 尺寸大小。
• el.style.width/height：图像的样式尺寸，表示给图像上添加的 css 样式所设置的尺寸。
• window.devicePixelRatio：浏览器的像素大小的比率（简称 dpr），表示设备的物理像素分辨率与 css 像素分辨率之比。或者可以直接理解为浏览器的缩放倍率。

想要使图像保持清晰，就需要让上述的三个属性之间保持如下关系：

el.naturalWidth/Height / el.style.width/height = window.devicePixelRatio

即：

图像的自然尺寸 / 图像的样式尺寸 = 浏览器的缩放倍率

只要使图像的尺寸保持如上关系，无论如何放大缩小图像，图像始终都能保持清晰。

//设置一个 300 * 200 的 canvas 的清晰度
const width = 300,height = 200
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const ratio = window.devicePixelRatio || 1
canvas.width = Math.floor(width * ratio)
canvas.height = Math.floor(height * ratio)
canvas.style.width = `${width}px`
canvas.style.height = `${height}px`
context.scale(ratio, ratio)