微信小程序利用canvas绘制一个动画百分比圆圈

「爱情、让人受尽委屈。」 2021-09-15 15:40 515阅读 0赞

在一次项目开发中，有个应用需求，就是不仅展示用户答题之后的分数和测评等级，还要利用动画圆圈的形式展示用户完成比。

首先一般先想到的就是利用canvas绘图，因为如果用CSS来制作的话会很麻烦，而且还要配合脚本一起完成才行。

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

具体可查看w3c官网文档里给出的介绍：[http://www.w3school.com.cn/tags/html\_ref\_canvas.asp][http_www.w3school.com.cn_tags_html_ref_canvas.asp]

还有小程序官网平台给出的文档：[https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html?search-key=arc][https_developers.weixin.qq.com_miniprogram_dev_component_canvas.html_search-key_arc]

好，现在开始正式绘制这个需求。

canvas其中有一个属性是绘图的关键，那就是它的arc属性，具体是这样的：

let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
       /*
       cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
       x                  Number    圆的x坐标
       y                  Number    圆的y坐标
       r                  Number    圆的半径
       sAngle             Number    起始弧度，单位弧度（在3点钟方向）
       eAngle             Number    终止弧度
       counterclockwise   Boolean   可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
       */

这里尤其要特别注意的是第四个参数，第四个参数代表绘图的起始弧度，并且默认是从三点钟方向开始的，所以如果想从12点钟方向开始绘图的话，需要将第四个参数设置为：- Math.PI \* 1 / 2。意思很明显，因为第六个参数是指绘图的方向，如果设置为false，那就是顺时针，一般也设置为顺时针，因为12点钟是在3点钟的逆时针方向上，所以第四个参数应该为负数，即需要负整个圆的四分之一，因为2\*PI代表的是整个圆，那么1/2就是四分之一圆了，所以要想从12点钟开始绘图，那么第四个参数需设置为：\- Math.PI \* 1 / 2。

好，接下来直接上代码：

上代码之前，这里给三个个提示：

1.就是脚本里面设置的一些关系像素的数据默认都是px，而现在小程序为了兼容各个移动终端，给出了一个新的像素单位，就是rpx。但是canvas绘图是与脚本一起完成的，所以这里建议大家还是统一像素单位比较好；

2.下面我是用定时器setInterval实现的，一定要注意的是，一旦启用定时器，那么在实现你的功能之后，一定要记得关闭；

3.微信小程序里有一个用于展示进度的组件<progress>，大家可以直接调用，但是比较局限。链接：[https://developers.weixin.qq.com/miniprogram/dev/component/progress.html?search-key=progress][https_developers.weixin.qq.com_miniprogram_dev_component_progress.html_search-key_progress]

HTML部分：

<view class='circleBar'>
      <view class="wrap">
        <view class="top">
            <canvas class="cir" style=' width:106px; height:106px;' canvas-id="canvasArc"></canvas>
            <view class="centerWord">{
       {resultComment}}</view>
        </view>
      </view>
    </view>

CSS部分：

/* 圆形进度条 */
    
    .circleBar {
      width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
    }
    
    .cir {
      display: inline-block;
      background-color: #fff;
      border-radius: 100%;
    }
    
    .top {
      text-align: center;
    }
    
    .centerWord {
      width: 100%;
      position: absolute;
      top: 40px;
      left: 0;
      text-align: center;
      color: #3686ff;
    }

JS部分：

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        timer: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        let that = this;
        // 以下两个是测试数据
        let totalItems = 100;
        let rightItems = 80;
        let completePercent = parseInt((rightItems / totalItems) * 100);
        that.getResultComment(completePercent);
        that.showScoreAnimation(rightItems, totalItems);
      },
    
      showScoreAnimation: function (rightItems, totalItems) {
       /*
       cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
       x	                    Number	  圆的x坐标
       y	                    Number	  圆的y坐标
       r	                    Number	  圆的半径
       sAngle	            Number	  起始弧度，单位弧度（在3点钟方向）
       eAngle	            Number	  终止弧度
       counterclockwise	    Boolean	  可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
       */
        let that = this;
        let copyRightItems = 0;
        that.setData({
          timer: setInterval(function () {
            copyRightItems++;
            if (copyRightItems == rightItems) {
              clearInterval(that.data.timer)
            } else {
              // 页面渲染完成
              // 这部分是灰色底层
              let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
              cxt_arc.setLineWidth(6);//绘线的宽度
              cxt_arc.setStrokeStyle('#d2d2d2');//绘线的颜色
              cxt_arc.setLineCap('round');//线条端点样式
              cxt_arc.beginPath();//开始一个新的路径
              cxt_arc.arc(53, 53, 50, 0, 2 * Math.PI, false);//设置一个原点(53,53)，半径为50的圆的路径到当前路径
              cxt_arc.stroke();//对当前路径进行描边
              //这部分是蓝色部分
              cxt_arc.setLineWidth(6);
              cxt_arc.setStrokeStyle('#3ea6ff');
              cxt_arc.setLineCap('round')
              cxt_arc.beginPath();//开始一个新的路径
              cxt_arc.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
              cxt_arc.stroke();//对当前路径进行描边
              cxt_arc.draw();
            }
          }, 20)
        })
      },
    
      getResultComment: function (completePercent) {
        let that = this;
        switch (true) {
          case completePercent < 60:
            that.setData({
              resultComment: "渣渣"
            })
            break;
          case completePercent >= 60 && completePercent <= 69:
            that.setData({
              resultComment: "学弱"
            })
            break;
          case completePercent >= 70 && completePercent < 80:
            that.setData({
              resultComment: "中等"
            })
            break;
          case completePercent >= 80 && completePercent < 90:
            that.setData({
              resultComment: "良好"
            })
            break;
          case completePercent >= 90 && completePercent < 95:
            that.setData({
              resultComment: "优秀"
            })
            break;
          case completePercent >= 95 && completePercent < 100:
            that.setData({
              resultComment: "学霸"
            })
            break;
          case completePercent >= 100:
            that.setData({
              resultComment: "学神"
            })
            break;
        }
      },
    }）

下来是效果展示图：

![70][]![70 1][]![70 2][]![70 3][]![70 4][]![70 5][]

[http_www.w3school.com.cn_tags_html_ref_canvas.asp]: http://www.w3school.com.cn/tags/html_ref_canvas.asp
[https_developers.weixin.qq.com_miniprogram_dev_component_canvas.html_search-key_arc]: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html?search-key=arc
[https_developers.weixin.qq.com_miniprogram_dev_component_progress.html_search-key_progress]: https://developers.weixin.qq.com/miniprogram/dev/component/progress.html?search-key=progress
[70]: https://img-blog.csdn.net/20180704105139802?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJsZXNfVGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/2018070410520711?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJsZXNfVGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180704105239562?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJsZXNfVGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180704105259715?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJsZXNfVGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/2018070410532058?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJsZXNfVGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: /images/20210522/f7944a09656e4ae28d082e9f66a6e62e.png