uniapp使用cavans画扇形图（初稿） 

 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>
View Code

 

posted @ 2021-04-26 18:55  蕾姆大人  阅读(588)  评论(0)    收藏  举报