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
| const x = 750;
| const y = 750;
| const r = 640;
| const lineWidth = 200;
| var arc;
| Component({
| mixins: [],
| data: { percent: '0%', width: '', height: '' },
| props: {
| percent: 0,
| width: '',
| height: ''
| },
| didMount() { },
| didUpdate() { },
| didUnmount() { },
| methods: {
| drawBg() {
| var ctx = this.ctxbg;
| //画背景圆
| ctx.setLineWidth(lineWidth - 10);
| ctx.setLineCap('round');
| ctx.arc(x, y, r, 0, Math.PI * 2, true);
| ctx.setStrokeStyle("#EAEAEA");
| ctx.stroke();
| ctx.draw();
| },
| draw() {
| console.log("画图");
| var ctx = this.ctx;
| //画背景圆
| ctx.setLineWidth(lineWidth);
| ctx.setLineCap('round');
|
| const gx1 = x + r;
| const gy1 = y;
|
| const gx2 = x + r * Math.cos(Math.PI * 2 - arc);
| const gy2 = y + r * Math.sin(Math.PI * 2 - arc);
|
| const grd = this.ctx.createLinearGradient(gx1, gy1, gx2, gy2);
|
| grd.addColorStop(0, '#DC51FF');
| grd.addColorStop(1, '#6FBDFF');
| ctx.setStrokeStyle(grd);
| ctx.arc(x, y, r, 0, Math.PI * 2 - arc, true);
| ctx.stroke();
| ctx.draw();
| }
| },
|
| onInit() {
| //设置角度
| arc = this.props.percent * Math.PI * 2 / 100;
| this.setData({
| percent: this.props.percent + "%",
| width: this.props.width,
| height: this.props.height
| });
| this.ctxbg = my.createCanvasContext('canvas-bg');
| this.ctx = my.createCanvasContext('canvas');
| this.drawBg();
| this.draw();
| },
| });
|
|
