小程序自定义圆形进度条


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 - HTML的request类
Jul 15 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JS中数组重排序方法
Nov 11 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
JS eval代码快速解密实例解析
Apr 23 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python configparser模块操作代码实例
2020/06/08 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
上班玩游戏检讨书
2014/02/07 职场文书
公司管理建议书范文
2014/03/12 职场文书
社区维稳工作方案
2014/06/06 职场文书
不错的求职信范文
2014/07/20 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
python如何将mat文件转为png
2022/07/15 Python