推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序之圆形进度条
发布时间:2020-10-31
需求概要
小程序中使用圆形倒计时，效果图：
使用 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; 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(); },看一下效果如下：
在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) 效果如下：
- 上一篇：小程序基于加速度计判断横竖屏
- 下一篇：小程序实现语音识别到底要填多少坑？
