微信小程序开发:实时圆形进度条实现
2017-04-20 13:57
615 查看
第九程序给大家带来微信小程序开发:实时圆形进度条实现,希望大家在开发小程序过程中能够帮助大家解决。
废话不多说,先上一张效果图!
![](http://ojyhagqv7.bkt.clouddn.com/9cn_20170224cbfc989d6505609cbd8730b6ff3360fe.jpg)
实现思路
建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。
WXML代码
开始动态绘制
WXSS代码
特别注意:底层的canvas最好使用
z-index:-99;放置于底层
page { width: 100%; height: 100%; background-color: #fff;
}.circle-box { text-align: center; margin-top: 10vw;
}.circle { position: absolute; left: 0; right: 0; margin: auto;
}.draw_btn { width: 35vw; position: absolute; top: 33vw; right: 0; left: 0; margin: auto; border: 1px #000 solid; border-radius: 5vw;
}
JS代码
//获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir');
Page({ data: {
}, drawCircle: function () {
clearInterval(varName); function drawArc(s, e) {
ctx.setFillStyle('white');
ctx.clearRect(0, 0, 200, 200);
ctx.draw(); var x = 100, y = 100, radius = 96;
ctx.setLineWidth(5);
ctx.setStrokeStyle('#d81e06');
ctx.setLineCap('round');
ctx.beginPath();
ctx.arc(x, y, radius, s, e, false);
ctx.stroke()
ctx.draw()
} var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0; var animation_interval = 1000, n = 60; var animation = function () { if (step <= n) {
endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
drawArc(startAngle, endAngle);
step++;
} else {
clearInterval(varName);
}
};
varName = setInterval(animation, animation_interval);
}, onReady: function () { //创建并返回绘图上下文context对象。
var cxt_arc = wx.createCanvasContext('canvasCircle');
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#eaeaea');
cxt_arc.setLineCap('round');
cxt_arc.beginPath();
cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false);
cxt_arc.stroke();
cxt_arc.draw();
}, onLoad: function (options) {
}
})
注意的要点
1、关于小程序canvas绘制,请观看微信小程序官方文档绘制
2、开始绘制的路径可以根据 JS代码中的变量startAngle 来选择从哪里开始绘制
废话不多说,先上一张效果图!
![](http://ojyhagqv7.bkt.clouddn.com/9cn_20170224cbfc989d6505609cbd8730b6ff3360fe.jpg)
实现思路
建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。
WXML代码
开始动态绘制
WXSS代码
特别注意:底层的canvas最好使用
z-index:-99;放置于底层
page { width: 100%; height: 100%; background-color: #fff;
}.circle-box { text-align: center; margin-top: 10vw;
}.circle { position: absolute; left: 0; right: 0; margin: auto;
}.draw_btn { width: 35vw; position: absolute; top: 33vw; right: 0; left: 0; margin: auto; border: 1px #000 solid; border-radius: 5vw;
}
JS代码
//获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir');
Page({ data: {
}, drawCircle: function () {
clearInterval(varName); function drawArc(s, e) {
ctx.setFillStyle('white');
ctx.clearRect(0, 0, 200, 200);
ctx.draw(); var x = 100, y = 100, radius = 96;
ctx.setLineWidth(5);
ctx.setStrokeStyle('#d81e06');
ctx.setLineCap('round');
ctx.beginPath();
ctx.arc(x, y, radius, s, e, false);
ctx.stroke()
ctx.draw()
} var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0; var animation_interval = 1000, n = 60; var animation = function () { if (step <= n) {
endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
drawArc(startAngle, endAngle);
step++;
} else {
clearInterval(varName);
}
};
varName = setInterval(animation, animation_interval);
}, onReady: function () { //创建并返回绘图上下文context对象。
var cxt_arc = wx.createCanvasContext('canvasCircle');
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#eaeaea');
cxt_arc.setLineCap('round');
cxt_arc.beginPath();
cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false);
cxt_arc.stroke();
cxt_arc.draw();
}, onLoad: function (options) {
}
})
注意的要点
1、关于小程序canvas绘制,请观看微信小程序官方文档绘制
2、开始绘制的路径可以根据 JS代码中的变量startAngle 来选择从哪里开始绘制
相关文章推荐
- 微信小程序实现实时圆形进度条的方法示例
- 微信小程序:实时圆形进度条实现
- 微信小程序:实时圆形进度条实现
- 微信小程序之圆形进度条实现思路
- 微信小程序:实时圆形进度条实现
- 微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
- 微信小程序HotApp云笔记开发问题总结 之textarea不能实时保存及里面的值的获取的问题?
- 微信小程序开发阅读&电影小程序之(2)——阅读页面轮播图实现
- 微信小程序开发之圆形菜单 仿建行圆形菜单
- 开发微信小程序(3)-全局配置app.json及底部导航栏实现
- 微信小程序开发之map地图实现教程
- 微信小程序开发之radio实现显示和隐藏功能
- 微信小程序开发之animation动画实现
- 微信小程序开发之圆形菜单 仿建行圆形菜单实例
- 微信小程序开发之animation循环动画实现的让云朵飘效果
- 微信小程序开发——下拉刷新的实现
- 【Android】开发干货-技术分享之高仿QQ微信网页加载进度条实现
- Android开发-进阶:实现微信自动抢红包的程序
- 微信程序开发---实现天气状态查询
- 微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画