微信小程序画布圆形进度条显示效果


Posted in Javascript onNovember 17, 2020

本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下

效果图:

微信小程序画布圆形进度条显示效果

代码:

wxml

<!--pages/test/test.wxml-->
<canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas>

js

// pages/test/test.js
var context = new wx.createCanvasContext('canvasid', this);
var strat_num = 1, end_num = 20;
var sAngle = 1.5 * Math.PI, eAngle = 0;
Page({
 onReady: function () {
 this.canvas()
 },
 canvas:function(){
 var that=this;
 if (strat_num <= end_num){
 console.log('strat_num:', strat_num)
 eAngle = strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI;
 setTimeout(function () {
 context.setStrokeStyle("#00ff00")
 context.setLineWidth(2)
 context.fillText(strat_num * 5 <= 100?strat_num * 5:100, 95, 95)
 context.arc(100, 100, 60, sAngle, eAngle, false)
 context.stroke()
 context.draw()
 that.canvas()
 strat_num++
 },200)
 } else {
 console.log('strat_num_end:', strat_num)
 }
 }
})

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

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

Javascript 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
You might like
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jquery自定义表格样式
2015/11/23 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python多线程扫描端口示例
2014/01/16 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python中线程和进程有何区别
2020/06/17 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
个人安全承诺书
2014/05/22 职场文书
专题组织生活会方案
2014/06/15 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
Android存储中最基本的文件存储方式
2022/04/30 Java/Android