Canvas to‘rtburchaklari
HTML Canvas to‘rtburchaklari
Canvas’da to‘rtburchak chizish uchun eng ko‘p ishlatiladigan uchta metod:
rect()metodifillRect()metodistrokeRect()metodi
rect() metodi
rect() metodi to‘rtburchakni belgilaydi.
rect() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | To‘rtburchak yuqori chap burchagining x koordinatasi |
| y | To‘rtburchak yuqori chap burchagining y koordinatasi |
| width | To‘rtburchakning piksellardagi kengligi |
| height | To‘rtburchakning piksellardagi balandligi |
Misol
(10,10) pozitsiyadan boshlanuvchi 150*100 piksel o‘lchamli to‘rtburchakni belgilash uchun
rect()’dan foydalaning. So‘ngra to‘rtburchakni haqiqatda chizish uchun
stroke()’dan foydalaning:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(10,10, 150,100);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
E’tibor bering, rect() metodi to‘rtburchakni chizmaydi (faqat uni belgilaydi). Shuning uchun uni haqiqatda chizish uchun qo‘shimcha ravishda
stroke() metodidan (yoki fill() metodidan) foydalanishingiz kerak.
fillRect() metodi
fillRect() metodi to‘ldirilgan to‘rtburchak chizadi.
fillRect() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | To‘rtburchak yuqori chap burchagining x koordinatasi |
| y | To‘rtburchak yuqori chap burchagining y koordinatasi |
| width | To‘rtburchakning piksellardagi kengligi |
| height | To‘rtburchakning piksellardagi balandligi |
To‘ldirish rangi fillStyle xususiyati bilan belgilanadi. Agar fillStyle xususiyati o‘rnatilmagan bo‘lsa, to‘ldirish rangi standart bo‘yicha qora bo‘ladi.
Misol
(10,10) pozitsiyadan boshlanuvchi 150*100 piksel o‘lchamli to‘ldirilgan to‘rtburchak chizish uchun
fillRect()’dan foydalaning:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10,10, 150,100);
</script>
O‘zingiz sinab ko‘ring »
Misol
fillStyle xususiyati yordamida to‘ldirish rangini o‘rnating:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
</script>
O‘zingiz sinab ko‘ring »
strokeRect() metodi
strokeRect() metodi konturli (faqat chegarasi chizilgan) to‘rtburchak chizadi.
strokeRect() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | To‘rtburchak yuqori chap burchagining x koordinatasi |
| y | To‘rtburchak yuqori chap burchagining y koordinatasi |
| width | To‘rtburchakning piksellardagi kengligi |
| height | To‘rtburchakning piksellardagi balandligi |
Kontur rangi strokeStyle xususiyati bilan belgilanadi. Agar strokeStyle xususiyati o‘rnatilmagan bo‘lsa, kontur rangi standart bo‘yicha qora bo‘ladi.
Misol
(10,10) pozitsiyadan boshlanuvchi 150*100 piksel o‘lchamli konturli to‘rtburchak chizish uchun
strokeRect()’dan foydalaning:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(10,10, 150,100);
</script>
O‘zingiz sinab ko‘ring »
Misol
strokeStyle xususiyati yordamida kontur rangini o‘rnating:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
</script>
O‘zingiz sinab ko‘ring »
Ko‘proq misollar
Misol
rect() metodi yordamida uchta to‘rtburchak yarating:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Misol
strokeRect() metodidan foydalanib, yuqoridagi natijaning aynan o‘zini kamroq kod bilan oling:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.strokeRect(5, 5, 290, 140);
// Green rectangle
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.strokeRect(30, 30, 50, 50);
// Blue rectangle
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.strokeRect(50, 50, 150, 80);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!