canvas在移动端上的模糊问题

问题出现： 做一个智能手环的微信页面时，在浏览器端调试了页面，放在微信上画布上的内容出现了锯齿和模糊。

问题剖析： 在使用 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 在页面上要显示的大小。

　　　　   比如：手机的宽是720像素的, 而这个canvas是按照422像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的。

解决方法： 既然是因为放大后才模糊的，我们就让他缩小显示。

　　　　　在画布绘制的时候放大到足够大（视实际情况而定），然后再CSS中设置为要显示的宽高，就不会出现模糊现象。

转载于:https://www.cnblogs.com/sjzbk/p/8328039.html