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


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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
经典团队口号大全
2014/06/21 职场文书
甜品店创业计划书
2014/09/21 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
捐款通知怎么写
2015/04/24 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript