Phương thức clearRect() của Canvas HTML

Giới thiệu

Phương thức clearRect() trong HTML Canvas được dùng để xóa các pixel trong một vùng hình chữ nhật xác định, làm cho vùng đó trở nên trong suốt. Phần tử <canvas> cho phép vẽ đồ họa trên trang web bằng JavaScript. Mỗi canvas có hai thuộc tính mô tả chiều cao và chiều rộng là height và width.

Cú pháp

ctx.clearRect(x, y, width, height);

Trong đó:

• x: Tọa độ x của góc trên bên trái của hình chữ nhật cần xóa.
• y: Tọa độ y của góc trên bên trái của hình chữ nhật cần xóa.
• width: Chiều rộng của hình chữ nhật cần xóa.
• height: Chiều cao của hình chữ nhật cần xóa.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="500" height="350" style="border:2px solid blue;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "gray";
    ctx.fillRect(0, 0, 500, 350); // Vẽ nền xám
    ctx.clearRect(250, 100, 50, 100); // Xóa một vùng hình chữ nhật
  </script>
</body>
</html>

Kết quả hiển thị

Kết quả sẽ hiển thị một canvas nền xám với một vùng hình chữ nhật trong suốt ở giữa.