当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序画布圆形进度条显示效果

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

2018年08月11日  | 移动技术网IT编程  | 我要评论

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

效果图：

代码：

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)
  }
 }
})

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网