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>