微信小程序之制作自定义圆形进度条1

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

文章主要介绍了详解微信小程序——自定义圆形进度条，具有一定的参考价值，实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。

JS代码：

Page({
 data: {},
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady: function () {
  
  // 页面渲染完成
  var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#d2d2d2');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
  cxt_arc.stroke();//对当前路径进行描边
    
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#3ea6ff');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
  cxt_arc.stroke();//对当前路径进行描边
  
  cxt_arc.draw();
    
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 }
})