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


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 相关文章推荐
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
js评分组件使用详解
Jun 06 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
angular动态表单制作
Feb 23 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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统一页面编码避免乱码问题
2015/04/09 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php实现简单的上传进度条
2015/11/17 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Python微信公众号开发平台
2018/01/25 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python实现马丁策略的实例详解
2021/01/15 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
职称自我鉴定
2013/10/15 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
简爱读书笔记
2015/06/26 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书