07-canvas绘制虚线

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>07-Canvas虚线</title>
 6     <style>
 7         *{
 8             margin: 0px;
 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     let oCanvas = document.querySelector("canvas");
22     let oCtx = oCanvas.getContext("2d");
23     oCtx.moveTo(100, 100);
24     oCtx.lineTo(400, 100);
25     oCtx.lineWidth = 20;
26     oCtx.strokeStyle = "blue";
27     // oCtx.setLineDash([5, 20]);
28     oCtx.setLineDash([5, 10, 20]);
29     // console.log(oCtx.getLineDash());
30     oCtx.lineDashOffset = -50;
31     oCtx.stroke();
32     /*
33     1.setLineDash
34     [5,10] 数组是用来描述你的排列方式的
35 
36     2.getLineDash
37     获取虚线的排列方式 获取的是不重复的那一段的排列方式
38 
39     3.lineDashOffset
40     设置虚线的偏移位
41     * */
42 
43 </script>
44 </body>
45 </html>