scale()
Canvas scale() metodi
Misol
To‘rtburchak chizing, 200% ga masshtablang, so‘ngra to‘rtburchakni yana chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
scale() metodi joriy kontekstni masshtablaydi.
Eslatma
Agar kontekstni masshtablasangiz, keyingi barcha chizmalar ham masshtablanadi. Agar scale(2,2) qilsangiz, chizmalar canvas’ning 0,0 pozitsiyasidan siz ko‘rsatganingizdan ikki barobar uzoqroqqa joylashtiriladi.
Shuningdek qarang:
rotate() metodi (kontekstni aylantirish)
translate() metodi (0,0 pozitsiyasini ko‘chirish)
transform() metodi (kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish)
setTransform() metodi (kontekstni masshtablash, aylantirish, ko‘chirish, qiyshaytirish).
Sintaksis
| context.scale(scalewidth, scaleheight) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| scalewidth | Kenglikni masshtablaydi (1=100%, 0.5=50%, 2=200%) | Sinab ko‘rish » |
| scaleheight | Balandlikni masshtablaydi (1=100%, 0.5=50%, 2=200%) | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Misol
To‘rtburchak chizing, 200% ga masshtablang, to‘rtburchakni yana chizing, 200% ga masshtablang, to‘rtburchakni yana chizing, 200% ga masshtablang, to‘rtburchakni yana chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
scale() 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!