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


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 23 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
HTML+JS实现在线朗读器
Feb 15 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
也谈php网站在线人数统计
2008/04/09 PHP
php zend 相对路径问题
2009/01/12 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js中replace的用法总结
2013/12/27 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
利用Python如何生成随机密码
2016/04/20 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
如何使用Python 打印各种三角形
2019/06/28 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
“四风”问题整改措施和努力方向
2014/09/20 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年体育部工作总结
2015/04/02 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle