微信小程序绘制半圆(弧形)进度条


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序绘制半圆进度条的具体代码,供大家参考,具体内容如下

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, 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, 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%;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
You might like
PHP实现下载功能的代码
2012/09/29 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
Javascript window对象详解
2014/11/12 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
详解python调度框架APScheduler使用
2017/03/28 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
商务英语专业自荐信
2013/10/14 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
mysql函数全面总结
2021/11/11 MySQL
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python
小程序自定义轮播图圆点组件
2022/06/25 Javascript