03-canvas线条属性

 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>