Canvas clearRect()
clearRect() metodi
clearRect() metodi canvas’ning to‘rtburchak shaklidagi hududini tozalash uchun ishlatiladi. Tozalangan to‘rtburchak shaffof bo‘ladi.
clearRect() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | Majburiy. To‘rtburchak yuqori chap burchagining x koordinatasi |
| y | Majburiy. To‘rtburchak yuqori chap burchagining y koordinatasi |
| width | Majburiy. To‘rtburchakning piksellardagi kengligi |
| height | Majburiy. To‘rtburchakning piksellardagi balandligi |
Misol
(10,10) pozitsiyadan boshlanuvchi 150*100 piksel o‘lchamli to‘ldirilgan to‘rtburchak chizish uchun
fillRect()’dan foydalaning. So‘ngra canvas’dagi to‘rtburchak shaklidagi hududni tozalash uchun
clearRect()’dan foydalaning:
<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>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda tozalangan to‘rtburchak pushti to‘rtburchakdan tashqariga chiqadi:
<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>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda konturli to‘rtburchak ichidagi to‘rtburchak shaklidagi hududni tozalash uchun
clearRect() metodidan foydalanamiz:
<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>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!