02-canvas注意点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>02-Canvas注意点</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             background: red;
13             width: 500px;
14             height: 500px;
15         }
16     </style>
17 </head>
18 <body>
19 <!--1.创建一个画布-->
20 <canvas  width="300" height="200"></canvas>
21 <script>
22     /*
23     1.canvas有默认的宽度和高度
24     默认宽300px, 高150px
25     */
26     /*
27     2.不能通过CSS设置画布的宽高
28     通过CSS设置画布宽高会在默认宽高的基础上拉伸
29     如果需要设置canvas宽高请通过元素行内属性width和height设置
30     */
31     /*
32     3.线条默认宽度和颜色
33     通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色
34     但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,
35     所以会导致显示效果是2px和非纯黑色问题
36     * */
37 
38     // 2.拿到画布
39     let oCanvas = document.querySelector("canvas");
40     // 3.拿到绘制工具
41     let oCtx = oCanvas.getContext("2d");
42     // 4.利用绘制工具绘制直线
43     // 4.1设置起始位置
44     oCtx.moveTo(50, 50.5);
45     // 4.2设置路径上的点
46     oCtx.lineTo(200, 50.5);
47     // 4.2绘制已定义的路径
48     oCtx.stroke();
49 </script>
50 </body>
51 </html>