微信小程序画布圆形进度条显示效果


            本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码，供大家参考，具体内容如下

效果图：



代码：

wxml







<!--pages/test/test.wxml-->

<canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas>



js





// pages/test/test.js

var context = new wx.createCanvasContext('canvasid', this);

var strat_num = 1, end_num = 20;

var sAngle = 1.5 * Math.PI, eAngle = 0;

Page({

 onReady: function () {

  this.canvas()

 },

 canvas:function(){

  var that=this;

  if (strat_num <= end_num){

   console.log('strat_num:', strat_num)

   eAngle = strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI;

   setTimeout(function () {

    context.setStrokeStyle("#00ff00")

    context.setLineWidth(2)

    context.fillText(strat_num * 5 <= 100?strat_num * 5:100, 95, 95)

    context.arc(100, 100, 60, sAngle, eAngle, false)

    context.stroke()

    context.draw()

    that.canvas()

    strat_num++

  },200)

  } else {

   console.log('strat_num_end:', strat_num)

  }

 }

})







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。