微信小程序canvas画图（二）

最新推荐文章于 2025-06-07 10:24:25 发布

impossible1994727

最新推荐文章于 2025-06-07 10:24:25 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序 canvas 文章标签： canvas 微信小程序

本文链接：https://blog.youkuaiyun.com/impossible1994727/article/details/89636749

微信小程序同时被 2 个专栏收录

34 篇文章

订阅专栏

canvas

6 篇文章

订阅专栏

本文介绍了一种利用微信小程序的Canvas API手动绘制圆环图的方法。通过设定不同比例和颜色，作者成功创建了一个动态的圆环图表。该教程详细解释了如何在wxml中定义canvas元素，并通过js代码循环绘制每一段弧形。

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

有一个需求，根据各个比例画一个canvas圆环图；例子如下

我找了echart的插件，没弄好，然后尝试自己用canvas花了弧形的图；

1、在wxml里面定义一个canvas标签：

<canvas canvas-id='mycanvas' style='width:160rpx;height:160rpx'></canvas>

1、在data里面给定每部分的比例，比如：

countlist:[0.22,0.4,0.23],
colorlist:['red','blue','green']

3、开始绘制这个图：

const ctx = wx.createCanvasContext('mycanvas')
    ctx.setLineWidth(6);//环形图线条宽度
    for(var i in this.data.countlist){
      ctx.beginPath();
      ctx.setStrokeStyle(this.data.colorlist[i]);//配置每段弧形的背景色
      var begin = (i == 0 ? 0 : (this.data.countlist[i-1]+0.01)* Math.PI);//设置每段弧形之间的距离和开始位置；
      var end = (this.data.countlist[i] - 0.01)* Math.PI//设置每段弧形的结束位置；
      ctx.arc(40, 40, 37, begin,end);//以中心（40,40）为圆心，37为半径绘制弧形
      ctx.stroke();
    }
    ctx.draw()