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


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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
微信小程序实现加入购物车滑动轨迹
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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php获取图片信息的方法详解
2015/12/10 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue实现简易计算器功能
2021/01/20 Vue.js
Python中的函数作用域
2018/05/07 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
趣味游戏活动方案
2014/02/07 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
环境卫生标语
2015/08/03 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python