canvas 绘图出现模糊问题的解决方法

有一种说法是说因为绘制的坐标不是整数级的坐标，所以会变得模糊，所以在计算坐标的时候可以使用 Math.floor 将坐标取整，这样绘制就会变得清晰。

个人觉得这种说法并不实际，因为在实现的时候就是要计算到每个点每条线的具体位置，角度等等的精确值，这样粗糙的取整，会使得绘制出来的整体跟设计图上有比较大的出入，而且本身也无法维护让每次绘制都是在整数级的坐标上，比如绘制一个圆，要如何让每个点都是在整数坐标的像素点上？

还有一种方法比较简单，容易实现，而且效果在目前看来还是不错的。

先补充说明一个基础知识点，在使用 canvas 的时候，要设置画布的大小，要使用的是 canvas 的 width 与 height 属性，而不是设置 canvas 的 style 或者CSS样式中的 width 与 height 。

因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的，而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。

这里可以将 canvas 比喻为一个 img ，其中画布的 width 与 height 属性，相当于 img 中图片的原始尺寸；我们使用JS在画布上绘制的内容对应的就是 img 中的图片；而 style 或者CSS设置的 width 与 height ，就是设置 canvas 或者 img 在页面上要显示的大小。

因此这里要解决模糊的做法，就是将这张“图片”变得高清一点，然后缩小了来显示。具体实现就是将画布的大小设置为实际显示大小的两倍，然后在canvas的css属性设置正常显示的宽高，比如，要显示一个100*200的画布，可以这样写：

<canvas width="200" height="400" style="width:
100px;height: 200px;"></canvas>

如此就相当于画了一张200*400的图片，然后设置他显示成100*200的大小，这样一来就变得清晰了。需要注意的是，这样将画布放大之后，绘制的过程中对应的那些坐标，长度等等都要相应的放大，比如原本在100*200的画布上绘制 ctx.arc(10,10,5,0,Math.PI*2) ，现在在200*400的画布上就得改成 ctx.arc(20,20,10,0,Math.PI*2) 。