translate()
Canvas translate() metodi
Misol
(10,10) pozitsiyasida to‘rtburchak chizing, yangi (0,0) pozitsiyasini (70,70) ga o‘rnating. Xuddi shu to‘rtburchakni yana chizing (e’tibor bering, endi to‘rtburchak (80,80) pozitsiyasidan boshlanadi):
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
O‘zingiz sinab ko‘ring »
Tavsif
translate() metodi kontekstning (0,0) pozitsiyasini boshqa joyga ko‘chiradi.
Eslatma
translate() dan keyin yangi metodni chaqirsangiz, yangi pozitsiyalar x va y koordinatalariga qo‘shiladi:
Shuningdek qarang:
scale() metodi (kontekstni masshtablash)
rotate() metodi (kontekstni aylantirish)
transform() metodi (kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish)
setTransform() metodi (kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish).
Sintaksis
| context.translate(x, y) |
Parametr qiymatlari
Eslatma: Parametrlardan birini yoki ikkalasini ham ko‘rsatishingiz mumkin.
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| x | Gorizontal (x) koordinataga qo‘shiladigan qiymat | Sinab ko‘rish » |
| y | Vertikal (y) koordinataga qo‘shiladigan qiymat | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
translate() 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!