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>
