13-绘制矩形的简写方式

 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>