rect()
Canvas rect() metodi
Misol
150*100 piksel o‘lchamli to‘rtburchak chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
O‘zingiz sinab ko‘ring »
Tavsif
rect() metodi yo‘lga to‘rtburchak qo‘shadi.
Shuningdek qarang:
beginPath() metodi (yo‘lni boshlash uchun)
stroke() metodi (yo‘lni chizish uchun)
fill() metodi (to‘rtburchakni to‘ldirish va chizish uchun)
fillRect() metodi (to‘ldirilgan to‘rtburchak chizish)
Sintaksis
| context.rect(x, y, width, height) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| x | To‘rtburchak yuqori chap burchagining x koordinatasi | Sinab ko‘rish » |
| y | To‘rtburchak yuqori chap burchagining y koordinatasi | Sinab ko‘rish » |
| width | To‘rtburchakning piksellardagi kengligi | Sinab ko‘rish » |
| height | To‘rtburchakning piksellardagi balandligi | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Misol
rect() metodi yordamida uchta to‘rtburchak yarating:
JavaScript:
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();
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
rect() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!