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>
自己動手試一試 »
