Phương thức ClearRect() của Canvas trong HTML
Phương thức clearRect()
Phương thức clearRect()
được sử dụng để xóa một vùng hình chữ nhật của khung vẽ. Hình chữ nhật đã xóa là trong suốt.
Phương thức clearRect()
có các tham số sau:
Parameter | Description |
---|---|
x | Required. The x-coordinate of the upper-left corner of the rectangle |
y | Required. The y-coordinate of the upper-left corner of the rectangle |
width | Required. The width of the rectangle, in pixels |
height | Required. The height of the rectangle, in pixels |
Ví dụ
Sử dụng fillRect()
để vẽ hình chữ nhật có kích thước 150*100 pixel, bắt đầu ở vị trí (10,10). Sau đó sử dụng clearRect()
để xóa vùng hình chữ nhật trong khung vẽ:
<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>
Hãy tự mình thử » Ví dụ
Ở đây hình chữ nhật đã xóa sẽ nằm ngoài hình chữ nhật màu hồng:
<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>
Hãy tự mình thử »Ví dụ
Ở đây chúng ta sử dụng phương thức clearRect()
để xóa một vùng hình chữ nhật trong một hình chữ nhật có nét:
<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>
Hãy tự mình thử »