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>