Canvas transformatsiyalari
HTML Canvas transformatsiyalari
Transformatsiyalar yordamida koordinata boshini (origin) boshqa pozitsiyaga ko‘chirishimiz, uni aylantirishimiz va masshtablashimiz mumkin.
Transformatsiyalar uchun oltita metod mavjud:
translate()- canvas’dagi elementlarni to‘rdagi yangi nuqtaga ko‘chiradirotate()- canvas’dagi elementlarni soat mili bo‘yicha yoki soat miliga teskari aylantiradiscale()- canvas’dagi elementlarni kattalashtiradi yoki kichraytiraditransform()- joriy transformatsiyani berilgan argumentlarga ko‘paytiradiresetTransform()- joriy transformatsiyani birlik matritsaga qaytaradisetTransform()- joriy transformatsiyani birlik matritsaga qaytaradi, so‘ngra argumentlarda berilgan transformatsiyani bajaradi
translate() metodi
translate() metodi obyekt/elementni x va y qiymatlariga ko‘chirish uchun ishlatiladi.
translate() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | Gorizontal yo‘nalishda (chapga va o‘ngga) ko‘chirish masofasi |
| y | Vertikal yo‘nalishda (yuqoriga va pastga) ko‘chirish masofasi |
Faraz qilaylik, bitta obyekt (10,10) pozitsiyaga joylashtirilgan. So‘ngra translate(70,70) dan foydalanamiz. Keyingi obyekt ham (10,10) pozitsiyaga joylashtiriladi, ammo bu ikkinchi obyekt x bo‘yicha 80 (70 + 10) va y bo‘yicha 80 (70 + 10) pozitsiyaga joylashishini bildiradi.
Keling, bir nechta misolni ko‘rib chiqamiz:
Misol
Avval (10,10) pozitsiyada bitta to‘rtburchak chizing, so‘ngra translate() ni (70,70) ga o‘rnating (bu yangi boshlang‘ich nuqta bo‘ladi). Keyin (10,10) pozitsiyada yana bir to‘rtburchak chizing. E’tibor bering, ikkinchi to‘rtburchak endi (80,80) pozitsiyadan boshlanadi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script>
O‘zingiz sinab ko‘ring »
Misol
Avval (10,10) pozitsiyada bitta to‘rtburchak chizing, so‘ngra translate() ni (70,70) ga o‘rnating (bu yangi boshlang‘ich nuqta bo‘ladi). Keyin (10,10) pozitsiyada yana bir to‘rtburchak chizing. E’tibor bering, ikkinchi to‘rtburchak endi (80,80) (70+10, 70+10) pozitsiyadan boshlanadi. So‘ngra translate() ni (80,-65) ga o‘rnating (bu yangi boshlang‘ich nuqta bo‘ladi). Keyin (10,10) pozitsiyada uchinchi to‘rtburchakni chizing. E’tibor bering, uchinchi to‘rtburchak endi (160,15) (80+80, 80-65) pozitsiyadan boshlanadi. E’tibor bering, translate() har safar chaqirilganda oldingi boshlang‘ich nuqta asosida ishlaydi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, -65);
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 100, 50);
</script>
O‘zingiz sinab ko‘ring »
rotate() metodi
rotate() metodi shaklni ma’lum burchakka aylantiradi.
rotate() metodi quyidagi parametrga ega:
| Parametr | Tavsif |
|---|---|
| angle | Aylantirish burchagi (soat mili bo‘yicha) |
Maslahat: Burchaklar gradusda emas, radianlarda beriladi. O‘girish uchun (Math.PI/180)*degree’dan foydalaning.
Misol
To‘rtburchakni 20 gradusga aylantiring:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
</script>
O‘zingiz sinab ko‘ring »
Misol
Bu yerda yana bitta to‘rtburchak qo‘shamiz. Ikkala to‘rtburchak ham 20 gradusga aylantiriladi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
ctx.strokeStyle = "blue";
ctx.strokeRect(70, 30, 100, 50);
</script>
O‘zingiz sinab ko‘ring »
scale() metodi
scale() metodi canvas’dagi elementlarni kattalashtiradi yoki kichraytiradi.
scale() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| x | Gorizontal masshtab koeffitsiyenti (kenglik) |
| y | Vertikal masshtab koeffitsiyenti (balandlik) |
Canvas’dagi bitta birlik — bitta piksel. Agar masshtab koeffitsiyentini 2 qilib o‘rnatsak, bitta birlik ikki pikselga teng bo‘ladi va shakllar ikki baravar katta chiziladi. Agar masshtab koeffitsiyentini 0.5 qilib o‘rnatsak, bitta birlik 0.5 pikselga teng bo‘ladi va shakllar yarim o‘lchamda chiziladi.
Misol
To‘rtburchak chizing. 200% ga masshtablang, so‘ngra yangi to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 2);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
O‘zingiz sinab ko‘ring »
Misol
To‘rtburchak chizing. 50% ga masshtablang, so‘ngra yangi to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(15, 15, 25, 25);
ctx.scale(0.5, 0.5);
ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 25, 25);
</script>
O‘zingiz sinab ko‘ring »
Misol
To‘rtburchak chizing. Kenglikni 200% ga, balandlikni 300% ga masshtablang, so‘ngra yangi to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 3);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
O‘zingiz sinab ko‘ring »
transform() metodi
transform() metodi joriy transformatsiyani ushbu metod argumentlari bilan ifodalangan matritsaga ko‘paytiradi. Bu kontekstni masshtablash, aylantirish, ko‘chirish (translate) va qiyshaytirish imkonini beradi.
transform() metodi transformatsiya matritsasini almashtiradi va uni quyidagicha ifodalangan matritsaga ko‘paytiradi:
a c e
b d f
0 0 1
transform() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| a | Gorizontal masshtablash |
| b | Gorizontal qiyshaytirish |
| c | Vertikal qiyshaytirish |
| d | Vertikal masshtablash |
| e | Gorizontal ko‘chirish |
| f | Vertikal ko‘chirish |
Misol
Sariq to‘rtburchak chizing, transform() yordamida yangi transformatsiya matritsasini qo‘llang. Qizil to‘rtburchak chizing, yangi transformatsiya matritsasini qo‘llang, so‘ngra ko‘k to‘rtburchak chizing. E’tibor bering, transform() har safar chaqirilganda oldingi transformatsiya matritsasi asosida ishlaydi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
O‘zingiz sinab ko‘ring »
resetTransform() metodi
resetTransform() metodi joriy transformatsiyani birlik matritsaga qaytaradi.
Bu quyidagini chaqirishga teng: ctx.setTransform(1,0,0,1,0,0).
setTransform() metodi
setTransform() metodi joriy transformatsiyani birlik matritsaga qaytaradi, so‘ngra argumentlar orqali ifodalangan transformatsiyani bajaradi. Bu kontekstni masshtablash, aylantirish, siljitish (ko‘chirish) va qiyshaytirish imkonini beradi.
setTransform() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| a | Gorizontal masshtablash |
| b | Gorizontal qiyshaytirish |
| c | Vertikal qiyshaytirish |
| d | Vertikal masshtablash |
| e | Gorizontal ko‘chirish |
| f | Vertikal ko‘chirish |
Misol
Sariq to‘rtburchak chizing,
setTransform() yordamida transformatsiya matritsasini qayta o‘rnating va yangisini ishga tushiring. Qizil to‘rtburchak chizing, transformatsiya matritsasini qayta o‘rnating va yangisini ishga tushiring, so‘ngra ko‘k to‘rtburchak chizing. E’tibor bering, bu misolda qizil to‘rtburchak ko‘rinmaydi, chunki u ko‘k to‘rtburchak ostida qolgan:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!