01-canvas体验

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>01-Canvas开篇</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             background: red;
13         }
14     </style>
15 </head>
16 <body>
17 <!--1.在body中创建一个canvas标签-->
18 <!--
19 注意点
20 canvas标签有默认的宽度和高度
21 默认的宽度是300px
22 默认的高度是150px
23 -->
24 <canvas></canvas>
25 <script>
26     /*
27     1.什么是Canvas？
28     Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案
29     Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
30     * */
31     // 2.通过js代码拿到canvas标签
32     let oCanvas = document.querySelector("canvas");
33     // 3.从canvas标签中获取到绘图工具
34     let oCtx = oCanvas.getContext("2d");
35     // 4.通过绘图工具在canvas标签上绘制图形
36     // 4.1设置路径的起点
37     oCtx.moveTo(50, 50);
38     // 4.2设置路径的终点
39     oCtx.lineTo(200, 50);
40     oCtx.lineTo(200,100);
41     // 4.3告诉canvas将这些点连接起来
42     oCtx.stroke();
43 </script>
44 </body>
45 </html>