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


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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
js onclick事件传参讲解
Nov 06 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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中oci8扩展
2015/06/18 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
详解js中==与===的区别
2017/01/08 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python3调用windows dos命令的例子
2019/08/14 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
小学生操行评语大全
2014/04/22 职场文书
优秀求职信
2014/05/29 职场文书
计划生育诚信协议书
2014/11/02 职场文书
大学毕业生自我评价
2015/03/02 职场文书
支教个人总结
2015/03/04 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
英语导游欢迎词
2015/09/30 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers