怎么用微信小程序canvas實現環形漸變

這篇文章主要介紹“怎么用微信小程序canvas實現環形漸變”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用微信小程序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;
}

關于“怎么用微信小程序canvas實現環形漸變”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。