1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05-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.closePath 23 自动创建从当前点回到起始点的路径 24 25 2.lineJoin 26 设置相交线的拐点样式 miter(默认)、round、bevel 27 * */ 28 let oCanvas = document.querySelector("canvas"); 29 let oCtx = oCanvas.getContext("2d"); 30 oCtx.moveTo(50, 50); 31 oCtx.lineTo(200, 50); 32 oCtx.lineTo(200, 200); 33 // 注意点: 如果通过lineTo来闭合图形, 那么是不能很好的闭合 34 // oCtx.lineTo(50, 50); 35 oCtx.closePath(); 36 oCtx.lineWidth = 20; 37 // oCtx.lineJoin = "round"; 38 oCtx.lineJoin="bevel"; 39 // oCtx.lineJoin="miter"; 40 // 注意点: 默认情况下不会自动从最后一个点连接到起点 41 oCtx.stroke(); 42 </script> 43 </body> 44 </html>