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

猜你喜欢

• JS的单线程和异步是什么，怎么实现

  本篇文章给大家带来了关于JavaScript中单线程和异步的相关知识，希望对大家有帮助。

• 怎么用JS写一个简单的星座查询功能，代码是什么

  最近小编在做一个项目，其中涉及到一个模块关于星座查询功能，即在文本框中输入一个生日值，点击按钮可以得到对应的星座，怎么实现这个需求呢？下面小编通过示例代码给大家介绍下，需要的朋友参考下吧

• 利用JS实现多边形折射效果的步骤方法是什么

  在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。

• 深度解读如何使用requestAnimationFrame 高效精准地重绘平滑的动画

  这篇文章主要为大家介绍了requestAnimationFrame定时动画屏幕刷新率节流示例浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vuex对象有哪些及用法是什么？

  今天我们来了解一下vuex，下文会给大家分享vuex中四大对象state、mutations、getters、actions以及他们的用法，对新手学习和理解vuex对象有一定的帮助，感兴趣的朋友就继续往下看吧。