canvas绘图有锯齿毛边问题的解决

canvas绘制的一个圆形，用于表现移动端的朝向及视场角，绘制完成后出现了明显的锯齿，移动端看的时候也是非常明显，如下图所示：

本次主要是通过 hidpi-canvas 有效地解决。
原理与实现也都相对简单，其实就是将放大devicePixelRatio 倍canvas的宽高， 再通过适当缩放画布，以此来保持清晰度。具体实现步骤如下：

1. 点击链接下载 hidpi-canvas.js 文件 ；
2. 我使用了ionic，在项目中assets下新建了js文件夹存放下载的hidpi-canvas.js，并在index.html中引入，<script src="assets/js/hidpi-canvas.min.js" ></script>；
3. 把getPixelRatio( ) 函数复制到代码段中并调用；
4. drawCircle( ) 中 ‘画笔’对象传参得到ratio的值，width 和 height 乘以 ratio即可。

drawCircle( ) {
    this.canvas = $('#circle')[0];    
    this.ctx = this.canvas.getContext("2d");    
    var ratio = this.getPixelRatio(this.ctx);
    this.canvas.width = 360 * ratio; 
    this.canvas.height = 360 * ratio; 
    ......
}

得到的效果如下图所示：