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>