微信小程序开发:实时圆形进度条实现
来源:互联网 发布:linux蓝牙终端 编辑:程序博客网 时间:2024/06/06 05:00
第九程序给大家带来微信小程序开发:实时圆形进度条实现,希望大家在开发小程序过程中能够帮助大家解决。
废话不多说,先上一张效果图!
实现思路
建立两个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 来选择从哪里开始绘制
- 微信小程序开发:实时圆形进度条实现
- 微信小程序:实时圆形进度条实现
- 微信小程序开发笔记:为了做一个录制按钮,研究了下小程序的实时圆形进度条实现
- iOS开发之简单实现圆形进度条
- 微信小程序——自定义圆形进度条
- iOS开发圆形进度条
- Android实现圆形进度条
- android 实现圆形进度条
- iOS开发之圆形进度条
- 自定义实现圆形播放进度条
- 圆形进度条动画效果实现
- 自定义属性实现圆形进度条
- 自定义View实现圆形进度条
- 圆形进度条的实现方法
- Libgdx 圆形进度条的实现
- CAShapeLayer实现圆形进度条效果
- 贝赛尔曲线实现圆形进度条
- 自定义View实现圆形进度条
- MATLAB之imfilter和fspecial函数
- C++explicit的使用
- 使用PHPStorm 配置自定义的Apache与PHP环境
- 【SQL】使用一条INSERT语句完成多表插入
- stl string常用函数
- 微信小程序开发:实时圆形进度条实现
- QML如何结合Qt使用GridView
- 用Monitor简单3步监控ActiveMQ
- build-in webserver in PhpStorm
- 正则表达式总结
- 热更新Tinker研究(六):TinkerPatchPlugin
- Windows bat脚本之for循环之 一
- Android Studio NDK及so文件开发
- Android AOP实现原理之字节码插桩(一)