小程序自定义圆形进度条


Posted in Javascript onNovember 17, 2020

本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下

circle.wxss:

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;
}

circle.wxml:

<view class="wrap">
 <view class="circle-box">
 <canvas class="circle" style="z-index: -99; width:200px; height:200px;" canvas-id="canvasCircle">
 </canvas>
 <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir">
 </canvas>
 <view class="draw_btn">
 <view>80分</view>
 <view>(满分100分)</view>
 </view>
 </view>
</view>

circle.js:

// pages/circle/circle.js
//获取应用实例
const app = getApp()
var ctx = wx.createCanvasContext('canvasArcCir');
Page({

 /**
 * 页面的初始数据
 */
 data: {

 },
 drawCircle: function() {
 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();
 //圆心的 x,y坐标,radius半径 s:起始弧度,单位弧度(在3点钟方向) e:终止弧度,:false弧度的方向是否是逆时针
 ctx.arc(x, y, radius, s, e, false);
 ctx.stroke()
 ctx.draw()
 }
 var step = 70,
 startAngle = 1.5 * Math.PI,
 endAngle = 0,
 n = 100,
 endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
 drawArc(startAngle, endAngle);

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 //调用画圆的方法
 this.drawCircle()
 },
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 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();
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
详解jQuery选择器
Dec 21 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 #Javascript
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 #Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 #Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 #Javascript
ant design pro中可控的筛选和排序实例
Nov 17 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
品质管理部岗位职责范文
2014/03/01 职场文书
党的群众路线学习材料
2014/05/16 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
烈士陵园观后感
2015/06/08 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Python基础详解之邮件处理
2021/04/28 Python