本文实例为大家分享了微信小程序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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript的字符串引号有几种，使用要注意什么

  字符串可以包含在单引号、双引号或反引号中。单引号和双引号基本相同。反引号允许我们通过${…}在字符串中嵌入任何表达式。允许字符串换行。

• vue项目用cookie实现登录页面记住密码功能

  我们在做前端项目开发时，往往会遇到登录页面记住密码的需求。那么我们在vue登录页面要如何来实现这样的功能？本文就教大家vue登录页面用cookie实现记住七天密码的功能。感兴趣的朋友继续往下看吧。

• JS的delete属性作用是什么，用法是怎样的

  delete属性是在JavaScript中经常使用的删除对象的一个属性，但是对于新手用户们来说却不是很了解其使用方法，那么接下来我们就一起去看看如何使用JavaScript delete属性的吧。

• vue缓存页面怎样管理？什么时候销毁及如何销毁？

  今天我们来了解的是vue缓存页面怎样管理的内容，对于vue缓存页面的管理的问题的就是什么时候销毁及如何销毁，那么具体怎样做呢？下面跟随小编一起来了解看看吧。

• JS ES6中Class类实现原理是什么

  JavaScript ES6 Class类实现原理详解,JavaScript ES6之前的还没有Class类的概念，生成实例对象的传统方法是通过构造函数。