小程序自定义圆形进度条


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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python多线程编程简单介绍
2015/04/13 Python
5款非常棒的Python工具
2018/01/05 Python
基于python实现学生管理系统
2018/10/17 Python
简单了解Python write writelines区别
2020/02/27 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
自考自我鉴定范文
2013/10/30 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
公司募捐倡议书
2014/05/14 职场文书
社会公德演讲稿
2014/05/20 职场文书
校外活动方案
2014/08/28 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python