微信小程序实现实时圆形进度条的方法示例


Posted in Javascript onFebruary 24, 2017

前言

最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧。

效果图如下

微信小程序实现实时圆形进度条的方法示例
初始状态

微信小程序实现实时圆形进度条的方法示例

点击中间按钮开始绘制

微信小程序实现实时圆形进度条的方法示例

绘制过程

微信小程序实现实时圆形进度条的方法示例

绘制结束

实现思路

建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。

WXML代码

<view class="wrap">
 <view class="circle-box">
 <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir">
 </canvas>
 <canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle">
 </canvas>
 <view class="draw_btn" bindtap="drawCircle">开始动态绘制</view>
 </view>
</view>

WXSS代码

特别注意:底层的canvas最好使用

z-index:-5;放置于底层

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 来选择从哪里开始绘制

微信小程序实现实时圆形进度条的方法示例

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用微信小程序能带来一定的帮助,最后有什么问题可以留言,大家一起讨论共同进步。

Javascript 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
微信小程序用户授权最佳实践指南
May 08 Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 #Javascript
Bootstrap3多级下拉菜单
Feb 24 #Javascript
使用原生的javascript来实现轮播图
Feb 24 #Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 #Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 #Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
You might like
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP加密技术的简单实现
2016/09/04 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
详解webpack的配置文件entry与output
2017/08/21 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python中有趣在__call__函数
2015/06/21 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
简单英文演讲稿
2014/01/01 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年招生工作总结
2014/11/26 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android