小程序自定义圆形进度条


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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
获取Javscript执行函数名称的方法
Dec 22 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
综合图片计数器
2006/10/09 PHP
PHP运行模式汇总
2016/11/06 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
python自定义函数def的应用详解
2020/06/03 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
工作表扬信的范文
2014/01/10 职场文书
中考冲刺决心书
2014/03/11 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
学生检讨书怎么写
2015/05/07 职场文书
运动会广播稿50字
2015/08/19 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers