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


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代码
Jul 19 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
js实现时间日期校验
May 26 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
物流仓管员工作职责
2014/01/06 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
小学生植树节活动总结
2014/07/04 职场文书
政风行风建设责任书
2014/07/23 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014年民政工作总结
2014/11/26 职场文书
2015年教师节主持词
2015/07/03 职场文书
关于做家务的心得体会
2016/01/23 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Golang: 内建容器的用法
2021/05/05 Golang
Django使用redis配置缓存的方法
2021/06/01 Redis