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>