HTML Canvas clearRect() 方法
clearRect() 方法
该 clearRect() 方法用于清除画布上的矩形区域。清除的矩形是透明的。
该 clearRect() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 必需。矩形左上角的 x 坐标 |
| y | 必需。矩形左上角的 y 坐标 |
| 宽度 | 必需。矩形的宽度（以像素为单位） |
| 高度 | 必需。矩形的高度（以像素为单位） |
示例
使用 fillRect() 绘制一个填充的 150*100 像素矩形，从位置 (10,10) 开始。然后使用 clearRect() 清除画布上的矩形区域
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
ctx.clearRect(60,35, 50,50);
</script>
自己试试 »
示例
这里清除的矩形超出了粉色矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
ctx.clearRect(60,35, 150,50);
</script>
自己试试 »
示例
这里我们使用 clearRect() 方法清除描边矩形中的矩形区域
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
ctx.clearRect(60,35, 150,50);
</script>
自己试试 »
