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


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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
js中unicode转码方法详解
Oct 09 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
Vuex的actions属性的具体使用
Apr 14 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
8个必备的PHP功能开发
2015/10/02 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
详解Node 定时器
2018/02/26 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
使用python绘制常用的图表
2016/08/27 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Selenium定位元素操作示例
2018/08/10 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python异常处理知识点总结
2019/02/18 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
北京大学自荐信范文
2014/01/28 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
生产文员岗位职责
2014/04/05 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
Java的Object类的九种方法
2022/04/13 Java/Android
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL