解决canvas在移动端锯齿明显的问题

移动端

1. 先通过window.devicePixelRatio获取像素比
2. 然后设置canvas元素的宽高=canvas的style宽高像素比2（根据效果可以放大，但是过大会增加浏览器负担）

// 例如canvas宽高为400px*200px，devicePixelRatio = 2
// 宽则为400*2*2，高200*2*2
<canvas width="1600" height="800" style="width:400px;height:200px;" />

PC端

1. PC端上，canvas的宽高要和style宽高一致，否者会出现锯齿

// 例如canvas宽高为400px*200px
<canvas width="400" height="200" style="width:400px;height:200px;" />