半圆形进度条(小程序)

近期在做一个读书类的小程序，这时需要作出一个半圆形的进度条，等级进度条，就想着用canvas来完成，在网上百度了一下，参阅了这这篇博客博客地址，在结合实际需求加以修改。

这是ui的图片，一看就能知道这个需要自定义标题栏，然后这是一个长图，标题栏和下面的进度条的背景得分开来。上进度条的代码，
wxml

<view class="progress"><canvas canvas-id='bgCanvas' id='canvas-one' class='canvasI' wx:if="{{bgCanvas}}"></canvas><image src="{{bgCanvasImg}}" class='canvasII' wx:else></image><canvas canvas-id="runCanvas" class='canvasII' wx:if="{{runCanvas}}"></canvas><image src="{{runCanvasImg}}" class='canvasII' wx:else></image></view>

wxss

.progress {width: 90%;margin: 0 auto;height: 470rpx;position: relative;
}.canvasI {width: 470rpx;height: 470rpx;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto auto;
}.canvasII {width: 470rpx;height: 470rpx;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto auto;
}

让这两个canvas重叠在一起
js

const ctx = wx.createCanvasContext("bgCanvas"); //创建一个全局的canvas绘图上下文
const ctx2 = wx.createCanvasContext("runCanvas");
let mytime = "";
let n = 0;
var w = "";
var h = "";Page({/*** 页面的初始数据*/data: {resurl: app.globalData.resurl,percent_30: 30,percent_80: 80,c_val: 20,suffix: 300,menuBarHeight: app.globalData.menuBarHeight,statusBarHeight: app.globalData.statusBarHeight,runCanvas:true,bgCanvas:true},run(e) {let that = this;let src = that.data.src; //总共需要绘制的弧度let allSrc = that.data.allSrc; //每个间隔所需绘制的弧度所占比例n++;if (src * n > allSrc) {console.log('结束');clearInterval(mytime); //如果绘制完成，停掉计时器，绘制结束n = 0;//转化成图片wx.canvasToTempFilePath({canvasId: 'runCanvas',success: function(res) {var tempFilePath = res.tempFilePath;console.log('图片' + tempFilePath);that.setData({runCanvas:false,runCanvasImg: tempFilePath})wx.canvasToTempFilePath({canvasId: 'bgCanvas',success:function(succ){that.setData({bgCanvas: false,bgCanvasImg: succ.tempFilePath})}})},fail: function(res) {console.log(res);}})return;}let ntitle = that.data.ntitle;let score = that.data.score;let count = that.data.count;let left = that.data.left;let utitle = that.data.utitle;ctx2.arc(w, h, w - 8, 0.93 * Math.PI, (0.93 + src * n) * Math.PI); //每个间隔绘制的弧度ctx2.setStrokeStyle("#27C761");ctx2.setLineWidth("8");ctx2.setLineCap("round");ctx2.stroke();ctx2.beginPath();ctx2.setFontSize(24);ctx2.setFillStyle("#27c761");ctx2.fillText(ntitle, 95, 60);ctx2.setFontSize(15);ctx2.setFillStyle("#27c761");ctx2.fillText(score, 85, 85);ctx2.setFillStyle("#fff");if (count == -1) {ctx2.fillText('/ ∞', 110, 85);ctx2.setFontSize(12);ctx2.fillText('你已经是最高等级' + ntitle, 55, 120);} else {ctx2.fillText('/ ' + count, 110, 85);ctx2.setFontSize(12);ctx2.fillText('只需' + left + '点积分即可升级为' + utitle, 30, 120);}ctx2.draw();},canvasTap() {let that = this;clearInterval(mytime);mytime = setInterval(that.run, 5)},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {let that = this;getLevel({op: 'grade'}, function(res) {let allSrc = res.myself.score / res.myself.count;//计算需要绘制的比例let count = res.myself.count;//最大的比例let src = allSrc / 100if (count == -1) src = 1;that.setData({ntitle: res.myself.ntitle,score: res.myself.score,count: count,left: res.myself.left,utitle: res.myself.utitle,src: src,allSrc: allSrc,upgradeList: res.grade,myself: res.myself,explain: res.explain,})that.canvasTap();});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {var context = wx.createCanvasContext('firstCanvas')context.draw();wx.createSelectorQuery().select('#canvas-one').boundingClientRect(function(rect) { //监听canvas的宽高//获取canvas宽的的一半w = parseInt(rect.width / 2);//获取canvas高的一半，h = parseInt(rect.height / 2);//获取宽高的一半是为了便于找到中心点ctx.arc(w, h, w - 8, 0.93 * Math.PI, 2.08 * Math.PI); //绘制圆形弧线ctx.setStrokeStyle("#dddddd"); //设置填充线条颜色ctx.setLineWidth("8");     //设置线条宽度ctx.setLineCap("round");        //设置线条端点样式ctx.stroke();     //对路径进行描边，也就是绘制线条。ctx.draw();       //开始绘制}).exec()},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},

我这里转换成图片是因为这是一个长图，需要滚动，canvas的层级太高会遮挡标题栏，尝试用cover-view来写标题栏，但是cover-view不能用背景图片，所以把canvas转化成图片就不会被自定义标题栏遮挡了

半圆形进度条(小程序)相关推荐

php怎样获取视频播放的进度条,小程序如何实现视频或音频自定义可拖拽进度条...
本篇文章给大家带来的内容是关于小程序如何实现视频或音频自定义可拖拽进度条,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 小程序原生组件的音频播放时并没有进度条的显示,而此次项目中,鉴 ...
php投票的进度条,小程序实现投票进度条
本文实例为大家分享了小程序投票进度条的具体代码,供大家参考,具体内容如下示例图: 上代码: index.wxml: 进度 {{width}} 当前票数 {{quorumvotes}} index.w ...
Linux的C语言开发工具——通过进度条小程序学习使用gcc、gdb和make/Makefile工具
C语言实现进度条程序--gcc.gdb和make工具的使用一.Linux下的进度条程序实现二.Linux编译器-gcc 2.1 预处理(进行宏替换) 2.2 编译(生成汇编) 2.3 汇编(生成机 ...
＜ Linux ＞进度条小程序 + git三板斧
目录 1.Linux第一个小程序-进度条行缓冲区概念 \r && \n 进度条代码 2.git 创建仓库克隆仓库到本地三板斧第一招: git add 三板斧第二招: git co ...
PHP进度条小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
Linux下进度条小程序
源码如下: 简单实现的在命令行下进行简单的进度条显示的功能,能模拟现实目前的进度并且用旋转的字符表示代码正在运行未卡住. 代码主要利用了printf的格式化输出,以及回车符/r,在这里%s前进行了-1 ...
PHP进度条小程序,php短视频源码小程序实现圆形进度条
//1.封装在utils中 //底圆条 function floorCir(obj={}){ //参数为obj对象 let id=obj.id?obj.id:null; let x = obj.x? ...
进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...
wx2tt 微信小程序转头条小程序工具
wx2tt 微信小程序转头条小程序工具安装 npm i wx2tt -g 复制代码使用方法 wx2tt <path/to/wxapp> <path/to/ttapp> [- ...
php取消滑动条,小程序中button以及滚动条默认样式如何清除（代码）
本篇文章给大家带来的内容是关于小程序中button以及滚动条默认样式如何清除(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如下图所示的效果,用四个button实现: 在 ...

半圆形进度条(小程序)

半圆形进度条(小程序)相关推荐

最新文章

热门文章