微信小程序canvas2d绘制圆环进度条组件

苏苏哇哈哈

已于 2022-11-16 15:17:13 修改

阅读量2k

点赞数 1

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

于 2021-08-18 15:07:11 首次发布

本文链接：https://blog.csdn.net/qq_48085286/article/details/119780455

版权

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

53 篇文章 37 订阅

订阅专栏

微信小程序

43 篇文章 18 订阅

订阅专栏

本文介绍了如何使用微信小程序的Canvas组件创建一个支持2D渲染的圆环进度条，展示了从创建canvas context、尺寸调整到绘制灰色背景和彩色进度弧的完整过程。通过实例代码和链接，读者可以学习如何在实际项目中应用此功能。

摘要由CSDN通过智能技术生成

1.实现效果

在这里插入图片描述

2.微信小程序canvas官网

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

3.组件介绍

Canvas2D接口（type=“2d”）,支持同层渲染的一个圆环进度条。（wx.createCanvasContext已废弃）
在这里插入图片描述

4.部分代码

drawCanvasRing() {
      //canvas 2d
      const query = wx.createSelectorQuery().in(this);
      query.select('#myCanvas')
        .fields({ node: true , size: true})
        .exec(this.init.bind(this))
    },
    init(res){
      const canvas = res[0].node
      const ctx = canvas.getContext('2d');
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr);
      // 大小值的计算
      var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径
      var startDegree = this.data.startDegree; //从什么角度开始
      var maxValue = this.data.maxValue; //最大值
      var minValue = this.data.minValue; //最小值
      var value = this.data.value; //当前的值
      var lineColor = this.data.lineColor; //线条颜色
      var lineWidth = this.data.lineWidth; //线条宽度
      var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果

      //定义起始点
      ctx.translate(circle_r, circle_r);
      //灰色圆弧
      ctx.beginPath();
      ctx.strokeStyle="#ebebeb";
      ctx.lineWidth=lineWidth;
      ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);
      ctx.stroke();
      ctx.closePath();
      //有色彩的圆弧      
      ctx.beginPath();
      ctx.strokeStyle=lineColor;
      ctx.lineWidth=lineWidth;
      ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
      ctx.stroke();
      ctx.closePath();
    }