在canvas开发中，绘制1px线条时呈现出来的感觉给人很粗又很模糊的感觉。这是因为绘制线条时是从中间向两边绘制，比如说在（100，100）的位置绘制一条垂直直线，会以100为中心，在99.5和100.5的区间内绘制，但由于绘制的最小单位是1px，所以就会左右各填满剩下的0.5px，因此1px线条就变成的2px，所有奇数单位都会如此。
我所知的解决方式有两种：
- 第一种就是把canvas上下文整体向右、向下平移0.5像素。及
ctx.translate(-0.5,-0.5)。原因是把绘制位置偏移0.5像素后，那么绘制线条的边界就是 就是 [x.5 - 0.5, x.5 + 0.5]，正好就在一个像素范围内。 - 第二种就是把canvas画布的宽高设置成canvas样式宽高的2倍，再把canvas上下文放大2倍即可
ctx.scale(2, 2)。原理就是放大2倍后，所有的奇数单位都是偶数，这样就不会出现1像素问题。给画布宽高设置成样式的2倍，实际canvas中显示的图像就会缩小2倍，结合之前的放大处理，正好相互抵消。建议使用第二种处理绘制1px的问题。
const canvas = document.getElementById('canvas');
// 设置canvas样式宽高
canvas.style.width = 200 + 'px';
canvas.style.height = 200 + 'px';
// 设置canvas画布宽高为样式的2倍
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d'); // 上下文
ctx.scale(2, 2); // 整体放大2倍
