1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03-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 lineWidth: 线条宽度 22 strokeStyle: 线条颜色 23 lineCap: 线末端类型：(butt默认)、round、square 24 * */ 25 let oCanvas = document.querySelector("canvas"); 26 let oCtx = oCanvas.getContext("2d"); 27 // 修改线条的高度 28 oCtx.lineWidth = 50; 29 // 修改线条的颜色 30 oCtx.strokeStyle = "blue"; 31 // 修改线条的两端样式 32 // oCtx.lineCap = "round"; 33 // oCtx.lineCap="butt"; 34 oCtx.lineCap="square"; 35 oCtx.moveTo(50, 50); 36 oCtx.lineTo(200, 50); 37 oCtx.stroke(); 38 39 oCtx.moveTo(50,100); 40 oCtx.lineTo(200,100); 41 oCtx.stroke(); 42 </script> 43 </body> 44 </html>