1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>17-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 oCtx.moveTo(100, 100);
26 oCtx.arc(100, 100, 100, 0, Math.PI/2);
27 oCtx.closePath();
28 // oCtx.stroke();
29 oCtx.fill();
30 </script>
31 </body>
32 </html>
