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


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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
vue监听dom大小改变案例
Jul 29 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
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
理解JS事件循环
2016/01/07 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python中datetime模块参考手册
2017/01/13 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python处理document文档保留原样式
2019/09/23 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
网络维护中文求职信
2014/01/03 职场文书
政风行风评议整改方案
2014/09/15 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
借钱欠条怎么写
2015/07/03 职场文书