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>