setTransform()
Canvas setTransform() metodi
Misol
To‘rtburchak chizing. Transformatsiya matritsasini qayta o‘rnating. To‘rtburchakni yana chizing. Transformatsiya matritsasini qayta o‘rnating. To‘rtburchakni yana chizing.
setTransform() har safar chaqirilganda yangi matritsa quradi. Quyidagi misolda qizil to‘rtburchak ko‘rinmaydi, chunki u ko‘k to‘rtburchak ostida joylashgan:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
O‘zingiz sinab ko‘ring »
Tavsif
setTransform() metodi kontekstni masshtablaydi, aylantiradi, ko‘chiradi va qiyshaytiradi.
Canvas’dagi har bir obyektning transformatsiya matritsasi bor.
setTransform() metodi transformatsiya matritsasini birlik matritsaga qaytaradi, so‘ngra xuddi shu argumentlar bilan transform() metodini ishga tushiradi.
Eslatma
Transformatsiya faqat setTransform() chaqirilganidan KEYIN chizilgan chizmalarga ta’sir qiladi.
Shuningdek qarang:
scale() metodi (Kontekstni masshtablash)
rotate() metodi (Kontekstni aylantirish)
translate() metodi (0,0 pozitsiyasini ko‘chirish)
transform() metodi (Kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish)
Sintaksis
| context.setTransform(a, b, c, d, e, f) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| a | Chizmalarni gorizontal masshtablaydi | Sinab ko‘rish » |
| b | Chizmalarni gorizontal qiyshaytiradi | Sinab ko‘rish » |
| c | Chizmalarni vertikal qiyshaytiradi | Sinab ko‘rish » |
| d | Chizmalarni vertikal masshtablaydi | Sinab ko‘rish » |
| e | Chizmalarni gorizontal ko‘chiradi | Sinab ko‘rish » |
| f | Chizmalarni vertikal ko‘chiradi | Sinab ko‘rish » |
Qaytariladigan qiymat
| Yo‘q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
setTransform() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ HTML Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!