transform()
Canvas transform() metodi
Misol
To‘rtburchak chizing, transform() yordamida yangi transformatsiya matritsasini qo‘shing, to‘rtburchakni yana chizing, yangi transformatsiya matritsasini qo‘shing, so‘ngra to‘rtburchakni yana chizing. E’tibor bering, transform() har safar chaqirilganda oldingi transformatsiya matritsasi asosida ishlaydi:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
O‘zingiz sinab ko‘ring »
Tavsif
transform() metodi kontekstni masshtablaydi, aylantiradi, ko‘chiradi va qiyshaytiradi.
Canvas’dagi har bir obyektning transformatsiya matritsasi bor.
transform() metodi transformatsiya matritsasini almashtiradi va uni quyidagicha ifodalangan matritsaga ko‘paytiradi:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Eslatmalar
Transformatsiya faqat transform() chaqirilganidan KEYIN chizilgan chizmalarga ta’sir qiladi.
Transformatsiya boshqa rotate(), scale(), translate() yoki transform() transformatsiyalariga nisbatan qo‘llanadi. Agar siz ikki barobar masshtablasangiz va transform() ham ikki barobar masshtablasa, chizmalar to‘rt barobar masshtablanadi.
Shuningdek qarang:
scale() metodi (kontekstni masshtablash)
rotate() metodi (kontekstni aylantirish)
translate() metodi (0,0 pozitsiyasini ko‘chirish)
setTransform() metodi (kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish).
Sintaksis
| context.transform(a, b, c, d, e, f) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| a | Chizmani gorizontal masshtablaydi | Sinab ko‘rish » |
| b | Chizmani gorizontal qiyshaytiradi | Sinab ko‘rish » |
| c | Chizmani vertikal qiyshaytiradi | Sinab ko‘rish » |
| d | Chizmani vertikal masshtablaydi | Sinab ko‘rish » |
| e | Chizmani gorizontal ko‘chiradi | Sinab ko‘rish » |
| f | Chizmani vertikal ko‘chiradi | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
transform() 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!