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


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 remove 自定义数组删除方法
Oct 20 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
JavaScript 函数的执行过程
May 09 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JavaScript中的类型检查
Feb 03 Javascript
js实现简单的倒计时
Jan 28 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设计模式 注册表模式
2012/02/05 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php中stdClass的用法分析
2015/02/27 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
区域销售经理职责
2013/12/22 职场文书
班主任个人工作反思
2014/04/28 职场文书
个人作风建设心得体会
2014/10/22 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Vue如何清空对象
2022/03/03 Vue.js
python文件与路径操作神器 pathlib
2022/04/01 Python