HTML 画布矩形
HTML 画布矩形
在画布中绘制矩形最常用的三种方法是
rect()方法fillRect()方法strokeRect()方法
rect() 方法
rect() 方法定义一个矩形。
rect() 方法具有以下参数：
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素为单位 |
| height | 矩形的高度，以像素为单位 |
示例
使用 rect() 定义一个 150*100 像素的矩形，从位置 (10,10) 开始。然后使用 stroke() 方法实际绘制矩形。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(10,10, 150,100);
ctx.stroke();
</script>
自己试一试 »
注意 rect() 方法不会绘制矩形（它只是定义它）。因此，您还需要使用 stroke() 方法（或 fill() 方法）来实际绘制它。
fillRect() 方法
fillRect() 方法绘制一个填充的矩形。
fillRect() 方法具有以下参数：
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素为单位 |
| height | 矩形的高度，以像素为单位 |
填充颜色由 fillStyle 属性指定。如果没有设置 fillStyle 属性，则填充颜色默认为黑色。
示例
使用 fillRect() 绘制一个填充的 150*100 像素的矩形，从位置 (10,10) 开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10,10, 150,100);
</script>
自己试一试 »
示例
使用 fillStyle 属性设置填充颜色
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
</script>
自己试一试 »
strokeRect() 方法
strokeRect() 方法绘制一个描边（轮廓）的矩形。
strokeRect() 方法具有以下参数：
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素为单位 |
| height | 矩形的高度，以像素为单位 |
描边颜色由 strokeStyle 属性指定。如果没有设置 strokeStyle 属性，则描边颜色默认为黑色。
示例
使用 strokeRect() 绘制一个描边的 150*100 像素的矩形，从位置 (10,10) 开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(10,10, 150,100);
</script>
自己试一试 »
示例
使用 strokeStyle 属性设置轮廓颜色
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
</script>
自己试一试 »
更多示例
示例
使用 rect() 方法创建三个矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 红色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// 绿色矩形
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// 蓝色矩形
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
</script>
自己试一试 »
示例
使用 strokeRect() 方法获得与上面相同的结果，代码更少
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 红色矩形
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.strokeRect(5, 5, 290, 140);
// 绿色矩形
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.strokeRect(30, 30, 50, 50);
// 蓝色矩形
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.strokeRect(50, 50, 150, 80);
</script>
自己试一试 »
