1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04-Canvas多根线条</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 background: yellowgreen; 13 } 14 </style> 15 </head> 16 <body> 17 <canvas></canvas> 18 <script> 19 /* 20 1.多根线条注意点 21 如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式) 22 如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式 23 24 2.如何给每根线条单独设置路径样式? 25 每根线条都开启一个新的路径即可 26 * */ 27 let oCanvas = document.querySelector("canvas"); 28 let oCtx = oCanvas.getContext("2d"); 29 oCtx.moveTo(50, 50); 30 oCtx.lineTo(200, 50); 31 oCtx.lineWidth = 20; 32 oCtx.strokeStyle = "blue"; 33 oCtx.stroke(); 34 35 oCtx.beginPath(); // 重新开启一个路径 36 oCtx.moveTo(50, 100); 37 oCtx.lineTo(200, 100); 38 oCtx.lineWidth = 10; // 重新设置当前路径样式 39 oCtx.strokeStyle = "red"; 40 oCtx.stroke(); 41 42 oCtx.beginPath(); // 重新开启一个路径 43 oCtx.moveTo(50, 150); 44 oCtx.lineTo(200, 150); 45 oCtx.lineWidth = 15; // 重新设置当前路径样式 46 oCtx.strokeStyle = "green"; 47 oCtx.stroke(); 48 </script> 49 </body> 50 </html>