解决canvas绘图模糊问题

先说下为什么会出现模糊的现象

canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊

我们怎么解决呢
我们可以把画布的宽和高设置为原来的两倍，也就是像素比为2

<canvas id="canvas" width="400" height="400"></canvas>
<style>
	canvas {
	    width: 200px;
	    height: 200px;
	}
</style>

标签的width和height指的（绘图区域）的宽高
这样我们绘制一个矩形的时候100100
实际我们看到的可能只有5050
这是因为我们在400*400的画布上画的

下一步，我们需要将 canvas 的绘图区域扩大一倍（因为 devicePixelRatio = 2），这样才能让视觉上的效果正常：

ctx.scale(2, 2)
ctx.strokeStyle = '#000'
ctx.lineWidth = 1
ctx.strokeRect(10, 10, 100, 100)

这样我们画出的矩形就很清晰