首页 >> js开发 >> js微信小程序绘制半圆（弧形）进度条js大全
js微信小程序绘制半圆（弧形）进度条js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下wxml：
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)
},
})
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%;
}
.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%;
}为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。
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)
},
})
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%;
}
.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%;
}为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
