本文实例为大家分享了微信小程序canvas实现环形渐变的具体代码，供大家参考，具体内容如下

这个例子是在微信小程序中写的

效果图

后端返回的数据格式，需要的只有otherInfo里面的数据

wxml

<view>
    <canvas class="progress_bg" canvas-id="{{otherInfo.bgid}}"> </canvas>
    <canvas class="progress_canvas" canvas-id="{{otherInfo.pgid}}"> </canvas>
</view>
<view class="progress_text">
    <text class='progress_info'> {{otherInfo.sumPointNumber || 0}}分</text>
</view>

js

data:{
   otherInfo: {
      bgid: "bgid",
      pgid: "pgid",
      sumPointNumber: 100   // 默认圆环显示的区域，全部显示是100
    }
}

根据接口获取数据，我只截取了需要的部分，赋值到data里面的otherInfo

下面是重要的canvas部分
用arc()方法创建圆，起始角设置为 0，结束角设置为 2*Math.PI（PI就是圆周率π，PI是弧度制的π,也就是180°，所以，Math.PI = 3.14 = 180°，PI是一个浮小数）

drawProgressbg() {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    let ctx = wx.createCanvasContext(that.data.otherInfo.bgid)
    ctx.setLineWidth(8 * w / 375);
    ctx.setStrokeStyle('#DDEDFA');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, 0, 2 * Math.PI, false);
    ctx.stroke();
    ctx.draw();
  },
  drawCircle() {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    let context = wx.createCanvasContext(that.data.otherInfo.pgid);
    context.setLineWidth(8 * w / 375);
    // context.setStrokeStyle('#55A5E6');    不渐变的背景色
    // 环形渐变的背景色
    var my_gradient = context.createLinearGradient(0, 0, 200, 0);
    my_gradient.addColorStop(1, "#FA6400");
    my_gradient.addColorStop(0, "#FFECAF");
    context.strokeStyle = my_gradient;
    context.setLineCap('round');
    context.beginPath();
    context.arc(80 * w / 375, 80 * w / 375, 65 * w / 375, -Math.PI / 2, that.data.otherInfo.sumPointNumber / 50 * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  },
  onLoad: function (options) {
    this.getList()   // 获取的数据
    this.drawProgressbg();
    this.drawCircle()
  },

wxss

.progress_bg {
  position: absolute;
  left: 30%;
  width: 300rpx;
  height: 300rpx;
  z-index: 9;
}
.progress_canvas {
  left: 30%;
  width: 300rpx;
  height: 300rpx;
  z-index: 9;
}
.progress_text {
  display: flex; 
  align-items: center;
 justify-content: center;
 margin-top: -23%;
}
.progress_info {
  letter-spacing: 2rpx;
  color: #000;
  font-weight: 600;
  font-size: 38rpx;
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用vue怎样做一个计时器的功能

  这篇文章主要为大家详细介绍了Vue计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS读取对象的快慢有什么因素相关，怎么提高速度

  访问字面量和局部变量最快，而访问数组元素和对象成员相对较慢。访问对象成员时，就像作用域链一样，在原型链上搜索。如果找到的成员在原型链中的位置太深，访问速度就会变慢。

• axios避免重复请求的方法有什么？

  axios避免重复请求的方法有什么？在实际的项目开发过程中，复点击导致多次调用接口的问题还是比较常见的，因此这篇文章就主要给大家介绍axios实现过滤多次重复请求的内容，感兴趣的朋友就继续往下看吧。

• 用vue怎样实现购物车的加减商品功能？

  加减商品是购物车的一个很重要的操作，但一些新手可能不清楚该怎样做，对此，这篇文章就给大家分享用vue怎样实现购物车的加减商品功能，效果如下，感兴趣的朋友可以参考。

• vue3中做物料库有什么意义，物料的类别包括什么

  这篇文章主要介绍了如何使用vue3打造一个物料库，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下