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>