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


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与FireFox的剪切板操作代码
Sep 28 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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
ThinkPHP模板中数组循环实例
2014/10/30 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python文件读写代码实例
2019/10/21 Python
python实现大学人员管理系统
2019/10/25 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
物业管理求职自荐信
2013/09/25 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书