钉钉小程序 + canvas实现环形进度条

1、在页面上添加 canvas 元素

<!-- 如果需要在高 dpr(设备像素比) 下取得更细腻的显示，需要先将 canvas 用属性设置放大，再用样式缩写 -->
<canvas id="canvasId" width="{
    {200 * pixelRatio}}" height="{
    {200 * pixelRatio}}" style="width:200px;height:200px;background:pink"/>

2、完成绘制圆环

1. 代码演示

Page({
   
  data: {
   
    pixelRatio: '',
  },
  onLoad() {
   
    var _this = this;
    // 获取到设备的像素比，并根据像素比设置canvas画布的缩放比例
    dd.getSystemInfo({
   
      success: (res) => {
   
        _this.setData({
   
          pixelRatio: res.pixelRatio
        })
      }
    })
  },
  onReady() {
   
    // 页面加载完成
    var _this = this;

    // dd.createSelectorQuery() 获取一个节点查询对象 SelectorQuery;
    // selectorQuery.select(selector) 选择当前第一个匹配选择器的节点，选择器支持 id 选择器以及 class 选择器
    // selectorQuery.boundingClientRect() 将当前所选择节点的位置信息放入查询结果，返回对象包含 width/height/left/top/bottom/right
    // selectorQuery.exec(callback) 将查询结果放入 callback 回调中。查询结果为数组，每项为一次查询的结果，如果当前是节点列表，则单次查询结果也为数组。注意 exec 必须放到onReady函数里调用
    dd.createSelectorQuery().select("#canvasId").boundingClientRect().exec(res => {
   
      // 环形进度条变量
      let canvasWidth = res[0].width; // canvas元素的宽
      let canvasHeight = res[0].height;  // canvas元素的高
      let outerRadius = 180 // 外环半径
      let thickness = 40 // 圆环厚度
      let innerRadius = outerRadius - thickness // 内环半径
      let x = 0 // 圆心x坐标
      let y = 0 // 圆心y坐标
      let startAngle = -90 //开始角度
      let endAngle = 180 //结束角度

      // 创建绘图上下文
      var ctx = dd.createCanvasContext('canvasId');
      // 将绘图原点移到画布中央，注意：移动的距离不是style里宽高的一半，而是属性设置里宽高的一半，所以需要先*设备像素比再/2
      ctx.translate(canvasWidth * _this.data.pixelRatio / 2, canvasHeight * _this.data.pixelRatio / <