HTML Canvas clearRect() 方法
clearRect() 方法
clearRect() 方法用于清除 canvas 的矩形区域。被清除的矩形是透明的。
clearRect() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 必填。矩形左上角的 x 坐标 |
| y | 必填。矩形左上角的 y 坐标 |
| width | 必填。矩形的宽度，以像素为单位 |
| height | 必填。矩形的高度，以像素为单位 |
示例
使用 fillRect() 绘制一个 150*100 像素的填充矩形，起始位置为 (10,10)。然后使用 clearRect() 清除 canvas 中的一个矩形区域
<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>
自己动手试一试 »
