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>