微信小程序圆环进度条

最新推荐文章于 2025-06-30 09:01:41 发布

原创

最新推荐文章于 2025-06-30 09:01:41 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中使用canvas绘制圆心进度条，通过实例代码展示具体实现过程，包括页面结构设置、JS逻辑处理和CSS样式定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果图

微信小程序里面用canvas画圆心进度条

页面给容器

<view class='weui'>
<canvas class='oneCan' canvas-id='one' ></canvas>
<canvas class='oneCan' canvas-id='two' ></canvas>
</view>

js:

data: {
    yuan:{height:110}
  },
onLoad: function (options) {
    var windowidth = 700;
    var colw=windowidth / 3;
    this.setData({
      yuan:{
        height:colw
      }
    })
    this.createCanvas('one',colw /2,'red','第一','80',100);
    this.createCanvas('two', colw / 2, 'red', '第一', '50',100);
  },

  createCanvas:function(id,xy,color,txt,val,total){
    var ctx=wx.createCanvasContext(id);
    ctx.setLineWidth(8);
    ctx.setStrokeStyle('#ffffff');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(xy,xy,0.75*xy,0,2*Math.PI,false);