Computer >> Máy Tính >  >> Lập trình >> HTML

Phương thức HTML canvas clearRect ()

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

Sau đây là cú pháp -

ctx.clearRect(p,q,width,height);

Ở trên,

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

Bây giờ chúng ta hãy xem một ví dụ để triển khai phương thức clearRect () của canvas−

Ví dụ

<!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);
ctx.clearRect(250, 100, 50, 100);
</script>
</body>
</html>

Đầu ra

Phương thức HTML canvas clearRect ()