微信小程序画布圆形进度条显示效果
更新时间：2020年11月17日 11:35:58 作者：a_靖
这篇文章主要为大家详细介绍了微信小程序画布圆形进度条显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码，供大家参考，具体内容如下
效果图：
代码：
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)
}
}
})
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
我们用手机的摄像头自拍,很容易实现简单的自拍效果,如复古、黑白等等,其实我们使用web端的JavaScript也是可以实现的,接下来就带领小伙伴实现一个魔法摄像头,并且提供了截图下载功能,需要的朋友可以参考下2023-08-08
这篇文章主要给大家介绍了关于js控制radio选中、不可选和改变事件的相关资料,我们经常会遇到js控制radio选中和切换的问题,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了js插件实现图片滑动验证码，滑动模块，实现验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家详细介绍了微信小程序实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
这篇文章主要介绍了在JS中函数参数是传值(byVal)还是传址(byRef)的误区我们通过实例说明一下，有需要的朋友可以参考2013-07-07
加入这样的一行代码IE的document的访问速度至少可以提高5倍以上，对于页面使用document的朋友绝对是个好方法。2010-12-12
这篇文章主要为大家详细介绍了支付宝小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了如何Canvas实现数字雨和放大镜效果，文中有完整的代码示例，文章通过代码介绍的非常清楚，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
PHP的自动加载就是我们加载实例化类的时候，不需要手动去写require来导入这个class.php文件，程序自动帮我们加载导入进来这.篇文章主要介绍了PHP自动加载autoload和命名空的应用,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了微信小程序canvas开发水果老虎机的思路，本文通过思路代码分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论