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>