1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>13-Canvas绘制矩形</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 canvas{ 12 display: block; 13 margin: 0 auto; 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <canvas width="300" height="300"></canvas> 20 <script> 21 // 1.拿到canvas 22 let oCanvas = document.querySelector("canvas"); 23 // 2.从canvas中拿到绘图工具 24 let oCtx = oCanvas.getContext("2d"); 25 /* 26 oCtx.moveTo(100, 100); 27 oCtx.lineTo(300, 100); 28 oCtx.lineTo(300, 300); 29 oCtx.lineTo(100, 300); 30 oCtx.closePath(); 31 // oCtx.stroke(); 32 oCtx.fill(); 33 */ 34 /* 35 oCtx.moveTo(100, 100); 36 oCtx.lineTo(300, 100); 37 oCtx.lineWidth = 200; 38 oCtx.stroke(); 39 */ 40 /* 41 第一个参数: x的坐标 42 第二个参数: y的坐标 43 第三个参数: 矩形的宽度 44 第四个参数: 矩形的高度 45 * */ 46 47 // oCtx.rect(100, 100, 200, 200); 48 // oCtx.stroke(); 49 // oCtx.fill(); 50 51 // oCtx.beginPath(); 52 // oCtx.rect(150, 150, 100, 100); 53 // oCtx.strokeStyle = "blue"; 54 // oCtx.stroke(); 55 56 // 简写形式 57 // oCtx.strokeRect(100, 100, 200, 200); 58 59 // oCtx.strokeStyle = "blue"; 60 // oCtx.strokeRect(150, 150, 100, 100); 61 62 63 // oCtx.fillRect(100, 100, 200, 200); 64 65 // oCtx.fillStyle = "blue"; 66 // oCtx.fillRect(150, 150, 100, 100); 67 // 清除某个矩形地区的东西 68 // oCtx.clearRect(0, 0, 150, 150); 69 // 清除整个画板 70 let canvasWidth = oCtx.canvas.width; 71 let canvasHeight = oCtx.canvas.height; 72 oCtx.clearRect(0, 0, canvasWidth, canvasHeight); 73 </script> 74 </body> 75 </html>