18-canvas绘制饼状图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <title>18-Canvas绘制饼状图</title>
 6     <style>
 7       * {
 8         margin: 0;
 9         padding: 0;
10       }
11       canvas {
12         display: block;
13         margin: 0 auto;
14         background: red;
15       }
16     </style>
17   </head>
18   <body>
19     <canvas width="500" height="400"></canvas>
20     <script>
21       // 1.拿到canvas
22       let oCanvas = document.querySelector("canvas");
23       // 2.从canvas中拿到绘图工具
24       let oCtx = oCanvas.getContext("2d");
25 
26       // 1.计算圆心的位置
27       let rx = oCtx.canvas.width / 2;
28       let ry = oCtx.canvas.height / 2;
29 
30       // 2.绘制第一个扇形
31       // oCtx.moveTo(rx, ry);
32       // oCtx.arc(rx, ry, 100, 0, Math.PI/2);
33       // oCtx.fillStyle = randomColor();
34       // oCtx.fill();
35 
36       // 3.绘制第二个扇形
37       // oCtx.beginPath();
38       // oCtx.moveTo(rx, ry);
39       // oCtx.arc(rx, ry, 100, Math.PI/2, Math.PI);
40       // oCtx.fillStyle = randomColor();
41       // oCtx.fill();
42 
43       // 4.绘制第三个扇形
44       // oCtx.beginPath();
45       // oCtx.moveTo(rx, ry);
46       // oCtx.arc(rx, ry, 100, Math.PI, Math.PI + Math.PI/2);
47       // oCtx.fillStyle = randomColor();
48       // oCtx.fill();
49 
50       // 5.绘制第四个扇形
51       // oCtx.beginPath();
52       // oCtx.moveTo(rx, ry);
53       // oCtx.arc(rx, ry, 100, Math.PI + Math.PI/2, Math.PI * 2);
54       // oCtx.fillStyle = randomColor();
55       // oCtx.fill();
56 
57       let startAngle = 0;
58       for (let i = 1; i <= 4; i++) {
59         let endAngle = (i * Math.PI) / 2;
60         oCtx.beginPath();
61         oCtx.moveTo(rx, ry);
62         oCtx.arc(rx, ry, 100, startAngle, endAngle);
63         oCtx.fillStyle = randomColor();
64         oCtx.fill();
65         startAngle = endAngle;
66       }
67 
68       function randomColor() {
69           let r = Math.floor(Math.random() * 256);
70           let g = Math.floor(Math.random() * 256);
71           let b = Math.floor(Math.random() * 256);
72           return `rgb(${r},${g},${b})`;
73       };
74 
75 
76 
77       //   定时器返回数据
78       //   function qwe(a) {
79       //     console.log(a);
80       //   }
81 
82       //   function dsd() {
83       //     setInterval(() => {
84       //       let qwer = 1;
85       //       qwe(qwer);
86       //     }, 1000);
87       //   }
88       //   dsd();
89     </script>
90   </body>
91 </html>