06-canvas填充图形颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>06-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="500"></canvas>
20 <script>
21     /*
22      1.stroke
23     绘制已定义的路径
24 
25     2.fill
26     填充已定义的路径
27     */
28     let oCanvas = document.querySelector("canvas");
29     let oCtx = oCanvas.getContext("2d");
30     /*
31     oCtx.moveTo(50, 50);
32     oCtx.lineTo(200, 50);
33     oCtx.lineTo(200, 200);
34     oCtx.closePath();
35     // oCtx.stroke();
36     oCtx.fillStyle = "blue";
37     oCtx.fill();
38     */
39     oCtx.moveTo(100, 100);
40     oCtx.lineTo(300, 100);
41     oCtx.lineTo(300, 300);
42     oCtx.lineTo(100, 300);
43     oCtx.closePath();
44     // oCtx.stroke();
45 
46     // oCtx.beginPath();
47     /*
48    oCtx.moveTo(150, 150);
49    oCtx.lineTo(250, 150);
50    oCtx.lineTo(250, 250);
51    oCtx.lineTo(150, 250);
52   */
53    oCtx.moveTo(250, 150);
54    oCtx.lineTo(150, 150);
55    oCtx.lineTo(150, 250);
56    oCtx.lineTo(250, 250);
57 
58     oCtx.closePath();
59     /*
60     注意点: 只要没有手动开启新的路径, 那么使用的都是默认路径
61     如果都是默认路径, 那么设置的样式在同一个路径中都是有效的
62     * */
63     // oCtx.strokeStyle = "blue";
64     // oCtx.stroke();
65     oCtx.fillStyle="blue";
66     oCtx.fill();
67     /*
68     对于同一路径,在填充的时候回遵循非零环绕规则
69     从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1
70     最终计算的结果如何是0就不填充, 如果不是0就填充
71     * */
72 </script>
73 </body>
74 </html>