在小程序某一个页面使用canvas绘制多个动态圆环
封装的公共的canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73// 绘制圆环动画共有方法
export default{
// data: {
// percentage: '', //百分比
// animTime: '', // 动画执行时间
// },
options:{
/* @description {绘制圆形进度条方法}
* @date 2019-7-13
* @author pengyf
* @param c: 绘制动画进度, id: canvas画板id, w,h: 圆心的横纵坐标
* @returns 无
*/
run(c, w, h, id) {
// 需要在这里重新获取一下id，不然只能绘制一次
let context = wx.createCanvasContext(id);
let num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
context.arc(w, h, w - 8, -0.5 * Math.PI, num); // 每个间隔绘制的弧度
// 设置为渐变的颜色
var gradient = context.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop('0', '#2661DD');
gradient.addColorStop('0.5', '#40ED94');
gradient.addColorStop('1.0', '#5956CC');
context.setStrokeStyle(gradient);
// 设置单一的颜色
// context.setStrokeStyle('#5ba2b6');
context.setLineWidth('16');
context.setLineCap('butt');
context.stroke();
context.beginPath();
context.setFontSize(20); // 注意不要加引号
context.setFillStyle('#ffef00');
context.setTextAlign('center');
context.setTextBaseline('middle');
context.fillText(c + '%', w, h);
context.draw();
},
/* @description {绘制圆环的动画效果实现}}
* @date 2019-7-13
* @author pengyf
* @param start: 起始百分比, end: 结束百分比,
w,h: 圆心的横纵坐标, id: canvas画板id
* @returns 无
*/
canvasTap(start, end, time, w, h, id) {
start++;
if (start > end) {
return false;
}
this.run(start, w, h, id);
setTimeout(() => {
this.canvasTap(start, end, time, w, h, id);
}, time);
},
/* @description {绘制圆环}}
* @date 2019-7-13
* @author pengyf
* @param id: canvas画板id, percent: 进度条百分比,time: 画图动画执行时间
* @returns 无
*/
draw(id, percent, animTime) {
let time = animTime / percent;
wx.createSelectorQuery().select('#' + id).boundingClientRect((rect) => {
//监听canvas的宽高
let w = parseInt(rect.width / 2); // 获取canvas宽的的一半
let h = parseInt(rect.height / 2); // 获取canvas高的一半，
this.canvasTap(0, percent, time, w, h, id);
}).exec();
}
}
}在page页面使用
使用了grid布局wxml
1
2
3
4
5
6
7
8
9<view class="contain">
<view class="data">
<view class="row" wx:for="{{canvasList}}" wx:key="{{index}}">
<view class='bigCircle pos-center'></view>
<view class='littleCircle pos-center'></view>
<canvas canvas-id="{{item.id}}" id="{{item.id}}" class='canvas pos-center'></canvas>
</view>
</view>
</view>wxss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47.data {
width: 100%;
/* display: flex;
flex-wrap: wrap; */
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(350rpx, 1fr));
grid-template-rows: repeat(2, 350rpx);
}
.data .row {
/* flex: 1; */
/* width: 350rpx;
height: 500rpx; */
position: relative;
background-color: #f5f5f5;
border: 1rpx solid #ddd;
}
/* .canvasBox{
height: 500rpx;
position: relative;
background-color: #f5f5f5;
} */
.pos-center {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.bigCircle{
width: 320rpx;
height: 320rpx;
border-radius: 50%;
background-color: #313250;
}
.littleCircle{
width: 256rpx;
height: 256rpx;
border-radius: 50%;
background-color: #171a3b;
}
.canvas{
width: 320rpx;
height: 320rpx;
z-index: 99;
}js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33import Canvas from '../../utils/canvas.js'
Page({
...Canvas.options, // 通过解构赋值，将共有文件中的方法和数据传递到要使用方法的文件
/**
* 页面的初始数据
*/
data: {
canvasList: [{
id: 'circle-one',
percent: 60
},
{
id: 'circle-second',
percent: 45
},
{
id: 'circle-three',
percent: 30
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const _canvasList= this.data.canvasList;
const len = _canvasList.length;
for(let i = 0; i < len; i++) {
this.draw(_canvasList[i].id, _canvasList[i].percent, 1000);
}
// this.draw(canvasList[0], this.data.percent2, 1000);
// this.draw('three', this.data.percent2, 1000);
}
})
`