1 <template>
2 <view class="content">
3 <canvas id="myCanvas" style="margin: 100rpx auto;width: 300px;height: 300px;" canvas-id="myCanvas"></canvas>
4 </view>
5 </template>
6
7 <script>
8 export default {
9 data() {
10 return {
11 title: 'Hello',
12 animationData: {},
13 routeHistory: 0
14 }
15 },
16 onLoad() {
17
18 },
19 onLoad() {
20
21 },
22 onReady() {},
23 onShow() {
24 setTimeout(res => {
25 this.createCavans()
26 })
27 },
28 onHide() {},
29 methods: {
30 createCavans() {
31 const ctx = uni.createCanvasContext('myCanvas')
32 const query = uni.createSelectorQuery().in(this);
33 let width = 0,
34 height = 0
35 query.select('#myCanvas').boundingClientRect(data => {
36 width = data.width;
37 height = data.height;
38 }).exec();
39 // 扇形个数
40 let num=[{
41 prent:10,
42 color:'#aa55ff'
43 },{
44 prent:15,
45 color:'#aaaa00'
46 },{
47 prent:30,
48 color:'#aaffff'
49 },{
50 prent:40,
51 color:'#aa557f'
52 },{
53 prent:5,
54 color:'#aa007f'
55 }]
56 let angle = Math.PI*2/100
57 let isAngel = 0
58 //
59 for(let i =0;i<num.length;i++){
60 let sAngle = i==0?0:isAngel
61 let eAngle = angle*num[i].prent+isAngel
62 isAngel = eAngle
63 ctx.beginPath()
64 ctx.moveTo(width / 2, height / 2);
65 let r = Math.random()*255
66 let g = Math.random()*255
67 let b = Math.random()*255
68 ctx.fillStyle=num[i].color
69 ctx.arc(width / 2, height / 2, 150,sAngle, eAngle);
70 ctx.fill()
71 }
72 ctx.draw()
73 },
74 }
75 }
76 </script>
77
78 <style lang="scss">
79
80 </style>
