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>