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


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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 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解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
webpack4的迁移的使用方法
2018/05/25 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
python实现校园网自动登录的示例讲解
2018/04/22 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python Selenium库的基本使用教程
2021/01/04 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年会计工作总结
2014/11/27 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python