绘制图片不清晰问题
问题原因和解决
canvas其实本质上也是一张图片，不管在canvas中绘制图片还是绘制其他图形，都是一样的道理
首先要明确，图片/canvas有以下两种尺寸
- 原始尺寸
例如：这样设置
javascript
canvas.width = 600
canvas.height = 600
// 或者
img.naturalWidth
img.naturalHeight
- 样式尺寸
例如：在
css中设置样式
css
#canvas {
width: 600px;
height: 600px;
}
图片的清晰与否还和当前页面的缩放倍率有关
缩放倍率可以通过window.devicePixelRatio获取
TIP
这三者之间有个公式如下：
原始尺寸 = 样式尺寸 * 缩放倍率
比如
canvas要呈现在页面上的大小为200*200，称之为显示尺寸
此时我们设置
canvas元素的样式尺寸 = 200(显示尺寸)，但是其实浏览器渲染的时候，会乘以缩放倍率而如果我们没有设置canvas的原始尺寸或者设置的不符合上面的公式的时候，渲染的图片就不清晰 所以也要设置canvas的原始尺寸为显示尺寸 * 缩放倍率然后将canvas进行缩放，因为如果不缩放，画出来的图形就会很小，缩放的倍数就是缩放倍率的值
解决方法如下：
TIP
- 设置
canvas的样式尺寸 = 显示尺寸
css
#canvas {
width: 200px;
height: 200px;
}
- 设置
canvas的原始尺寸 = 显示尺寸 * 像素比
javascript
const dpr = window.devicePixelRatio || 1
canvas.width = 200 * dpr
canvas.height = 200 * dpr
- 经历
步骤2后，画布大小变大了，那么画布也要进行对应的缩放，不然绘制出来的图形会很小
javascript
const ctx = canvas.getContext("2d")
ctx.scale(dpr, dpr)
完整代码如下：假设页面上要显示的尺寸为
200*200
javascript
const displaySize = 200
const canvas = document.querySelector("#canvas-optimize")
const dpr = window.devicePixelRatio || 1
canvas.width = displaySize * dpr
canvas.height = displaySize * dpr
// 或者在css中直接设置样式也可以
canvas.style.cssText += `width: ${displaySize}px;height: ${displaySize}px`
const ctx = canvas.getContext('2d')
ctx.scale(dpr, dpr)