Canvas在移动端设备上模糊出现锯齿边

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

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

解决模糊的做法，就是将这张“图片”变得高清一点，然后缩小了来显示。

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

相当于画了一张200*400的图片，然后设置他显示成100*200的大小，这样一来就变得清晰了。

注意：将画布放大之后，绘制的过程中对应的那些坐标，长度等等都要相应的放大。