04-canvas多根线条

 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>