一 前端

这里直接以小程序为例子：
因为小程序的自适应单位是rpx，就像我们用Rem去做适配一样，而Canvas的api所涉及的单位都是px
同样Canvas的自适应我们可以借鉴Rem适配的思想去处理。

1.首先明确基准稿的宽和获取设备宽

特别注意：在HTML5中设置Canvas的宽高，自带属性width和在CSS中设置是不同的，CSS中设置相当于拉升了整个画布，所以在做自适应的时候，我们需要动态的去设置Canvas的宽高，不过小程序好像帮我们做了这一点

   wx.getSystemInfo({
      success: function(res) {
            sysytemWidth = res.screenWidth //设备宽
      }
   }

2.根据两个宽度算出缩放比例

   const per = sysytemWidth /375    //这里以375为基准稿宽度
}

3.动态设置Canvas所绘图形的位置

这里以画弧线为例

    const _this = this;
    wx.getSystemInfo({
      success: function(res) {
        let systemWidth;
        const query = wx.createSelectorQuery();
        systemWidth = res.screenWidth;
        app.globalData.per = (systemWidth / 375).toFixed(2);
        const per = app.globalData.per;

        var canvas1 = wx.createCanvasContext('outer');
        canvas1.setStrokeStyle("#72f4f4");
        canvas1.setLineWidth(2);
        canvas1.arc(160 * per, 145 * per, 120 * per, Math.PI * 0.8, Math.PI * 0.2, false);
        canvas1.stroke();
        canvas1.draw();
      }
}

通过这样画出来的图形就可以自使用所有手机啦

4.Canvas类加载条

类似与js码表的一个动画
首先我们算出弧线的起始点，中点和终点

  // start:0.84pi
  // center:1.49pi
  // end:0.16pi
  const per = app.globalData.per
        if(num >0 && num<= 100)    //然后把起始点和中点分为10份，可以算出每份的角度偏移量为0.065
        {
          num = 0.84 + num * 0.0065;     //比如传入的num为 50，那么其就相当于占了5格，那么就在起始点基础上加上5格的偏移量  就是我们的最终位置
        } else if (num > 100 && num <= 200){
          num = 0.84 + num * 0.0066;
        }

        var timer,endAngel=0.84;
        var context = wx.createCanvasContext('firstCanvas');
        // context.arc(160 * per, 145 * per, 103 * per, Math.PI * 0.84, Math.PI*0.16, false);
        // context.stroke();
        // context.draw();
        clearInterval(timer)
        timer = setInterval(function () {

          context.setStrokeStyle("#fff");
          context.setLineWidth(8);

          endAngel = endAngel + 0.05;

          if (endAngel>=num)
          {
            endAngel = num;
          }

          context.arc(160 * per, 145 * per, 103 * per, Math.PI * 0.84, Math.PI * endAngel, false);
          context.stroke();
          context.draw();      //调用setInterval不停的去重绘，即可实现进度条的效果

          if (endAngel == num) {
            clearInterval(timer)
          }
        }, 100)

这里重点说一下Canvas的beginPath和closePath两个api
要开始新路径（画第二条线），必须调用beginPath，closePath是闭合两个点的路径（即将两个点连线）

The Relentless Pursuit of Perfection 持续更新中