微信小程式繪製半圓(弧形)進度條
阿新 • • 發佈:2020-11-19
本文例項為大家分享了微信小程式繪製半圓進度條的具體程式碼,供大家參考,具體內容如下
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({ /** * 頁面的初始資料 */ data: { canvasWidth: 500,canvasHeitht: 300,radioPos: 98,footNum: 0,footNumAll: 6000,myTargetFoot: 10000,degree: 195,timer: '',timerNum: '',},/** * 生命週期函式--監聽頁面載入 */ 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(); },/** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function() { },/** * 生命週期函式--監聽頁面顯示 */ onShow: function() { let that = this //清理 var context = wx.createCanvasContext('canvasProgressReal') context.clearRect(0,this.data.canvasWidth,this.data.canvasHeitht) context.draw({ reserve: true }) that.walkAction() },/** * 生命週期函式--監聽頁面隱藏 */ onHide: function() { },/** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function() { },/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function() { },/** * 頁面上拉觸底事件的處理函式 */ 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,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) } // },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%; }
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。