微信小程序-圆环倒计时

开始之前，我们先看一次微信的开发文档-绘图API，了解一下最基本的使用，比如画一个arc，一个rect，或者stroker()和fill()等是什么意思，好好看看下图，对接下来的代码理解会有帮助！！！

arc.png

以下为代码部分：

.wxml

<view class='container'>
<!--创建两个Canvas  -->
<canvas class='bgCanvas' canvas-id='bgCanvas'></canvas>
<view class='stepText'>{{stepText}}</view>
</view>
<button bindtap='clickStartBtn'>开始倒计时</button>

.wxss

.container{
    background-color: wheat;
    width:100%;
    height:200px;
    justify-content:center;
    position: relative;
}
.bgCanvas{
    width:200px;
    height:200px;
    margin: 0 auto;
    position: absolute;
    
}
.stepText{
  font-weight: bold;
  font-size: 100px;
  color: green;
}

.js

var valHandle;  //定时器
const ctx = wx.createCanvasContext("bgCanvas")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    stepText:5  //设置倒计时初始值
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
    ctx.setLineWidth(16)
    ctx.arc(100, 100, 92, 0, 2 * Math.PI)
    ctx.setStrokeStyle('white')
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.arc(100, 100, 92, 1.5 * Math.PI, -0.5*Math.PI, true)
    ctx.setStrokeStyle('green')
    ctx.stroke()
    ctx.draw()

  },
//点击开始倒计时按钮
  clickStartBtn:function(){
    console.log("倒计时动画开始")
    var that = this
    that.data.stepText = 5 //重新设置一遍初始值，防止初始值被改变
    var step = that.data.stepText ;  //定义倒计时
    var num = -0.5;
    var decNum = 2/step/10
    clearInterval(valHandle)

    function drawArc(endAngle) {
      ctx.setLineWidth(16)
      ctx.arc(100, 100, 92, 0, 2 * Math.PI)
      ctx.setStrokeStyle('white')
      ctx.stroke()

      ctx.beginPath()
      ctx.setLineCap('round')
      ctx.setLineWidth(10)
      ctx.arc(100, 100, 92, 1.5 * Math.PI, endAngle, true)
      ctx.setStrokeStyle('green')
      ctx.stroke()
      ctx.draw()
    }

    valHandle = setInterval(function(){

      that.setData({
        stepText: parseInt(step)
      })
      step = (step - 0.1).toFixed(1)
      
      num += decNum
      drawArc(num*Math.PI)
      
      if(step<=0){
        clearInterval(valHandle)  //销毁定时器
   
      }

    },100)
  },
})

最后：
倒计时只需要修改data中的stepText数字就可以了

效果图：（动图倒计时不对，是Gif提取的帧数少的原因，不必纠结） 倒计时Gif.gif