微信小程序canvas-圆环倒计时

一、对应微信小程序上API（画布）：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arc.html

二、微信小程序实例：

• 圆环canvas 倒计时效果图：

  
  
  

  canvas.gif

• index.wxml 文件：

  
    {{innerText}}
  

注意：canvas-id 必须设置，需要用来获取绘图上下文。

• index.wxss 文件：

.canvass {
  width: 200px;
  height: 200px;
  background-color: #fff;
  text-align: center;
  line-height: 200px;
  color: #49f;
  font-size: 50rpx;
}

• index.js 文件：

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('canvass');
    var n = 3;     // 倒计时圈中的文字显示
    this.setData({"innerText": n});
    var _this = this;
    function drawInnerCircle() {    // 绘制固定内圈圆
      context.save();              // save-保存绘图上下文
      context.setLineWidth(1);     // setLineWidth-设置线条宽度；参数-setLineWidth(线条宽度，单位px)
      context.moveTo(130, 100);    // moveTo-把路径移动到画布中的制定点，不创建线条；参数-moveTo(目标位置的x坐标，目标位置的y坐标)
      context.arc(100, 100, 30, 0, 2 * Math.PI, true);  // arc-创建一条弧线；参数-arc(圆心x坐标，圆心y坐标，圆半径，起始弧度，终止弧度，弧度方向是否是逆时针)
      context.stroke();            // stroke-画出当前路径的边框，默认颜色为黑色
      context.restore();           // restore-恢复之前保存的绘图上下文
      context.draw();    // draw-将之前在绘图上下文中的描述(路径，变形，样式)画到canvas中
    }
    function drawOutCircle(n) {    // 绘制倒计时外圈圆
      context.save();
      context.setLineWidth(4)
      context.moveTo(130, 100)
      context.arc(100, 100, 30, 0, -Math.PI * 2 / 3 * n, true)
      context.stroke()
      context.restore();
    }
    var intervalT = setInterval(function () {
      context.setStrokeStyle("#49f");    // setStrokeStyle-设置描边颜色；参数-setStrokeStyle(描边的颜色，默认颜色为black)
      if (n >= 0) {
        _this.setData({ "innerText": n });
        drawOutCircle(n);
        n -= 1;
      } else {
        // clearInterval(intervalT);     // 倒计时一次停止
        n = 3;                // 倒计时一轮结束后继续执行
      }
      drawInnerCircle();
    }, 500);
  }
})

注意：一般moveTo两个参数，目标位置的x坐标比y多一个半径（不准确推测）。

至此，微信小程序中canvas绘制倒计时圆环就完成了。其中用到的一些API方法也在 index.js中标出。