微信小程序中使用圆形倒计时实例
需求概要
小程序中使用圆形倒计时,效果图:
思路
- 使用2个canvas 一个是背景圆环,一个是彩色圆环。
- 使用setInterval 让彩色圆环逐步绘制。
解决方案
第一步先写结构
一个盒子包裹2个canvas以及文字盒子;
盒子使用相对定位作为父级,flex布局,设置居中;
一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"
另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
代码如下:
// wxml
<view class="container">
<view class='progress_box'>
<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas>
<canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas>
<view class="progress_text">
<view class="progress_dot"></view>
<text class='progress_info'> {{progress_txt}}</text>
</view>
</view>
</view>
// wxss
.progress_box{
position: relative;
width:220px;
height: 220px;
// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备,下绘制的圆环跑盒子外去了
// 小程序使用rpx单位适配 ,但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
}
.progress_bg{
position: absolute;
width:220px;
height: 220px;
}
.progress_canvas{
width:220px;
height: 220px;
}
.progress_text{
position: absolute;
display: flex;
align-items: center;
justify-content: center
}
.progress_info{
font-size: 36rpx;
padding-left: 16rpx;
letter-spacing: 2rpx
}
.progress_dot{
width:16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #fb9126;
}
第二步数据绑定
从wxml中可以看到我们使用了一个数据progress_txt,所以在js中设置data如下:
data: {
progress_txt: '正在匹配中...',
},
第三步canvas绘制
敲黑板,划重点
1. 先绘制背景
- 在js中封装一个画圆环的函数drawProgressbg,canvas 画圆
- 在onReady中执行这个函数;
小程序canvas组件与H5的canvas有点差别,请查看文档,代码如下
drawProgressbg: function(){
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext('canvasProgressbg')
ctx.setLineWidth(4);// 设置圆环的宽度
ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
//设置一个原点(100,100),半径为90的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw();
},
onReady: function () {
this.drawProgressbg();
},
看一下效果如下:
2. 绘制彩色圆环
- 在js中封装一个画圆环的函数drawCircle,
- 在onReady中执行这个函数;
drawCircle: function (step){
var context = wx.createCanvasContext('canvasProgress');
// 设置渐变
var gradient = context.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop("0", "#2661DD");
gradient.addColorStop("0.5", "#40ED94");
gradient.addColorStop("1.0", "#5956CC");
context.setLineWidth(10);
context.setStrokeStyle(gradient);
context.setLineCap('round')
context.beginPath();
// 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
context.stroke();
context.draw()
},
onReady: function () {
this.drawProgressbg();
this.drawCircle(2)
},
this.drawCircle(0.5) 效果如下: | this.drawCircle(1) 效果如下: | this.drawCircle(2) 效果如下: |
3. 设置一个定时器
- 在js中的data设置一个计数器 count,一个步骤step,一个定时器
- 在js中封装一个定时器的函数countInterval,
- 在onReady中执行这个函数;
data: {
progress_txt: '正在匹配中...',
count:0, // 设置 计数器 初始为0
countTimer: null // 设置 定时器 初始为null
},
countInterval: function () {
// 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
this.countTimer = setInterval(() => {
if (this.data.count <= 60) {
/* 绘制彩色圆环进度条
注意此处 传参 step 取值范围是0到2,
所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
*/
this.drawCircle(this.data.count / (60/2))
this.data.count++;
} else {
this.setData({
progress_txt: "匹配成功"
});
clearInterval(this.countTimer);
}
}, 100)
},
onReady: function () {
this.drawProgressbg();
// this.drawCircle(2)
this.countInterval()
},
最终效果
转载:https://blog.csdn.net/wangqin2734/article/details/79347273
微信小程序中使用圆形倒计时实例相关推荐
- 小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解 我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间( ...
- 微信小程序用定时器实现倒计时效果
平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要 ...
- PHP进度条 小程序,用微信小程序实现一个圆形的进度条
随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...
- 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解
微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- 微信小程序中带参数返回上一页的方法总结(三种)
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一 把当前页面数据放入本地缓存( wx.setStor ...
- php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下 今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
- 如何同步微信信息php,微信小程序中实现同步请求的方法
本篇文章给大家带来的内容是关于微信小程序中实现同步请求的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信小程序默认是用同步请求的,但有些时候需要数据的同步请求,可使用的方法有 ...
- 微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
最新文章
- Struts2文件上传方式与上传失败解决方式
- java中堆与栈的区别 彻底理解
- 最终成为了热门的语言——python
- Python文件操作IO open 读-取-写
- Anaconda中安装pytorch,并在pycharm中配置【win10】
- linux服务器黑屏_xshell连接Linux系统(小红帽7.3)服务器,导致服务器黑屏
- 五种类型的程序员,你属于哪一种?
- 云顶之弈机器人法爆_LOL云顶之弈机器人出装怎么选
- 编码程序教程_如何从编码教程到构建自己的项目
- kafka是什么_Kafka的Controller Broker是什么
- SPH(光滑粒子流体动力学)流体模拟实现四:各向异性(Anisotropic)表面光滑(1)
- 前端笔试题【1】--从字符串的第二个字符开始对数组进行排序
- 【HarmonyOS】【Json解析】ZSON 与 HiJson 使用
- python itchat文档_python itchat简介
- 爬虫精进(八) ------ selenium
- pythonppt生成替换_python生成ppt的方法
- android闹钟报告分析,Android AlarmClock 闹钟应用 简单分析
- Linux 应用调试神器- ASan
- OpenCV-Python快速入门(四):色彩空间
- linux oracle 常用操作
热门文章
- Jmeter运行过程中如何让Fiddler同时可以抓获到服务器的应答报文
- 数据库对象管理 (表)
- Linux 下查看系统是32位 还是64 位的方法
- MFC匿名管道原理详解、函数总结、调用实例(用MFC的匿名管道读取CMD输出内容)(C++语言)
- C# 动态获取、修改、更新配置文件 实现思路
- python和rpa有什么关系_什么是RPA_什么是RPA_产品简介_机器人流程自动化RPA - 阿里云...
- c语言通讯录运行结果,自己改编的通讯录,运行不行啊
- 游戏服务器出现问题怎么维护权益,游戏服务器出问题怎么解决
- c语言 集中上机题目,C语言集中上机题目.doc
- Android开发之快捷键Google官方版本包含Mac版本