微信小程序繪制半圓（弧形）進度條

更新時間：2020年11月18日 08:56:59 作者：Archer_yy

這篇文章主要為大家詳細介紹了微信小程序繪制半圓（弧形）進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序繪制半圓進度條的具體代碼，供大家參考，具體內容如下

wxml：

<view class="progress">
  <canvas canvas-id="canvasProgress" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"></canvas>
  </view>
  <view class="progress">
  <canvas canvas-id="canvasProgressReal" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"></canvas>
</view>

js：

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 canvasWidth: 500,
 canvasHeitht: 300,
 radioPos: 98,
 footNum: 0,
 footNumAll: 6000,
 myTargetFoot: 10000,
 degree: 195,
 timer: '',
 timerNum: '',
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {
 var that = this;
 let widthPX = wx.getSystemInfoSync().windowWidth;
 let r = this.data.radioPos = widthPX * (500 / 750) * (300 / 365) * (2 / 4)
 var context = wx.createCanvasContext('canvasProgress')
 context.translate(24, 6);
 context.setStrokeStyle("#fff");
 context.setLineWidth(2);
 context.beginPath();
 for (let i = 195; i >= -15; i--) { //每1度繪制一條線
  let degree = i / 360 * Math.PI * 2
  let radio = r * 0.92 - r * 0.005 * (210 - i) / 240
  context.moveTo(r + radio * Math.cos(degree), r - radio * Math.sin(degree)); //向量加減
  context.lineTo(r + r * Math.cos(degree), r - r * Math.sin(degree)); //向量加減
  context.stroke();
 }
 context.draw();



 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function() {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function() {
 let that = this
 //清理
 var context = wx.createCanvasContext('canvasProgressReal')
 context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)
 context.draw({
  reserve: true
 })
 that.walkAction()
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function() {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function() {

 },

 /**
 * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
 */
 onPullDownRefresh: function() {

 },

 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function() {

 },

 /**
 * 用戶點擊右上角分享
 */
 onShareAppMessage: function() {

 },
 walkAction: function() {
 console.log('walk')
 this.setData({
  degree: 195
 })
 let that = this
 let r = this.data.radioPos
 let widthPX = wx.getSystemInfoSync().windowWidth;
 var context = wx.createCanvasContext('canvasProgressReal')
 context.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeitht)
 context.setStrokeStyle("#FDD08F");
 context.translate(24, 6);
 context.setLineWidth(2);
 let degreeMax = 195 - (this.data.footNumAll / this.data.myTargetFoot) * 240;
 if (Number.parseInt(this.data.footNumAll) >= Number.parseInt(this.data.myTargetFoot)) {
  console.log('footNumAll is smaller than myTargetFoot')
  degreeMax = -33
 }
 this.timer = setInterval(() => {
  if (that.data.degree > degreeMax) {
  context.beginPath();
  let degreeOne = that.data.degree / 360 * Math.PI * 2
  let radio = r * 0.92 - r * 0.005 * (195 - that.data.degree) / 240
  context.moveTo(r + radio * Math.cos(degreeOne), r - radio * Math.sin(degreeOne));
  context.lineTo(r + r * Math.cos(degreeOne), r - r * Math.sin(degreeOne));
  context.stroke();
  // context.draw({
  // reserve: true
  // })//這個方法真機上繪制有問題
  wx.drawCanvas({
   canvasId: 'canvasProgressReal',
   actions: context.getActions(),
   reserve: true
  })
  // that.data.degree -= 3;
  that.data.degree--;
  } else {
  clearInterval(that.timer)
  }
  // }, 50)
 }, 10)
 let tempTimes = 0;
 let times = (this.data.footNumAll / this.data.myTargetFoot) * 240 / 3;
 if (Number.parseInt(this.data.footNumAll) >= Number.parseInt(this.data.myTargetFoot)) {
  times = 80
 }
 let step = this.data.footNumAll / times
 this.timerNum = setInterval(() => {
  if (tempTimes < times) {
  that.setData({
   footNum: Math.floor(that.data.footNum + step)
  })
  tempTimes += 1;
  } else {
  that.setData({
   footNum: that.data.footNumAll
  })
  clearInterval(that.timerNum)
  }
  // }, 50)
 }, 10)
 },
})

wxss：

.progress {
 z-index: 1;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 display: flex !important;
 align-items: center;
 justify-content: center;
}

.progress canvas {
 width: 100%;
 height: 100%;
}

為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: