Canvas misollari

O‘zingiz sinab ko‘radigan misollar

Quyidagi misollarda canvas bevosita HTML kodiga joylashtirilgan.

HTML Canvas barcha asosiy brauzerlarda qo‘llab-quvvatlanadi.

Canvas bilan tanishuv

Bo‘sh canvas Canvas’dagi birinchi chizma

Canvas koordinatalari

To‘rtburchak chizish Chiziq chizish Aylana chizish

Canvas chiziqlari

Chiziq chizish lineWidth - chiziq qalinligini o‘rnatish strokeStyle - chiziq rangini o‘rnatish lineCap - chiziq uchlari uslubini o‘rnatish

Canvas’da to‘ldirish va kontur (stroke)

fillStyle - to‘ldirish rangini o‘rnatish strokeStyle - kontur rangini o‘rnatish fillStyle va strokeStyle birgalikda Alfa kanalli (shaffoflik darajasi bilan) fillStyle va strokeStyle

Canvas shakllari

To‘g‘ri chiziqlardan shakl yaratish Uchburchak yaratish Shaklni bo‘yash uchun strokeStyle’dan foydalanish

Canvas to‘rtburchaklari

rect() - to‘rtburchakni belgilash fillRect() - to‘ldirilgan to‘rtburchak chizish fillStyle - to‘rtburchakning to‘ldirish rangi strokeRect() - konturli to‘rtburchak chizish strokeStyle - kontur rangini o‘rnatish rect() metodi bilan uchta to‘rtburchak yaratish strokeRect() metodi bilan uchta to‘rtburchak yaratish

Canvas clearRect()

To‘ldirilgan to‘rtburchak ichidagi to‘rtburchak sohani tozalash To‘ldirilgan to‘rtburchakning ichi va tashqarisidagi to‘rtburchak sohani tozalash Konturli to‘rtburchak ichidagi to‘rtburchak sohani tozalash

Canvas aylanalari

To‘liq aylana chizish Rangli to‘liq aylana chizish Yarim aylana chizish Boshlang‘ich burchak 0 dan oxirgi burchak 0.5 * PI gacha yoy chizish Boshlang‘ich burchak 0 dan oxirgi burchak 0.5 * PI gacha soat miliga teskari yo‘nalishda yoy chizish

Misollar izohi

Canvas egri chiziqlari

quadraticCurveTo() - kvadratik Bezier egri chizig‘ini chizish bezierCurveTo() - kubik Bezier egri chizig‘ini chizish

Canvas chiziqli gradienti

Ikkita rang to‘xtash nuqtasi bilan chiziqli gradient yaratish Konturli to‘rtburchakni gradient bilan to‘ldirish Uchta rang to‘xtash nuqtasi bilan chiziqli gradient yaratish Vertikal chiziqli gradient yaratish (y o‘qidagi parametr qiymatlarini o‘zgartiring (y2 ni o‘zgartiring)) Diagonal chiziqli gradient yaratish (ham x, ham y o‘qi parametrlarini o‘zgartirib) Aylanani gradient bilan to‘ldirish Matnni gradient bilan to‘ldirish Konturli matnni gradient bilan to‘ldirish

Canvas radial gradienti

Ikkita rang to‘xtash nuqtasi bilan radial gradient yaratish Oxirgi aylanasi kichikroq bo‘lgan radial gradient Oxirgi aylananing markaz nuqtasini siljitish Uchta rang to‘xtash nuqtasiga ega radial gradient

Canvas matni

fillText() - to‘ldirilgan matn chizish strokeText() - konturli matn chizish font - shriftga qalin va kursiv uslub qo‘shish

Canvas matn rangi

fillStyle - matnning to‘ldirish rangini o‘rnatish strokeStyle - matnning kontur rangini o‘rnatish Matnni gradient bilan to‘ldirish Konturli matnni gradient bilan to‘ldirish

Canvas matnini tekislash

textBaseline - matnning asosiy chizig‘ini (vertikal tekislanishini) o‘rnatish textAlign - matnning gorizontal tekislanishini o‘rnatish Matnni ham vertikal, ham gorizontal markazlashtirish

Canvas soyalari

shadowColor - shakllar uchun soya rangini o‘rnatish shadowColor - matn uchun soya rangini o‘rnatish shadowBlur - shakllar uchun soyaning xiralik darajasini o‘rnatish shadowBlur - matn uchun soyaning xiralik darajasini o‘rnatish shadowOffsetX - soyaning shakldan gorizontal masofasini o‘rnatish shadowOffsetY - soyaning shakldan vertikal masofasini o‘rnatish

Canvas rasmlari

drawImage(image, dx, dy) - rasmni canvas’ga joylashtirish drawImage(image, dx, dy, dwidth, dheight) - rasmni joylashtirish va uning canvas’dagi kengligi hamda balandligini belgilash drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) - manba rasmni canvas’ga joylashtirishdan oldin kesish

Canvas transformatsiyalari

translate() - obyekt/elementni x va y bo‘yicha siljitish translate() - obyekt/elementni x va y bo‘yicha siljitish rotate() - to‘rtburchakni 20 gradusga aylantirish rotate() - ikkita to‘rtburchakni 20 gradusga aylantirish scale() - elementni kattalashtirish scale() - elementni kichraytirish scale() - kenglikni 200% ga, balandlikni 300% ga masshtablash scale() - slayder yordamida masshtablash transform() - joriy transformatsiyani argumentlar orqali ifodalangan matritsaga ko‘paytirish setTransform() - joriy transformatsiyani birlik matritsaga qaytarib, so‘ngra argument orqali ifodalangan transformatsiyani bajarish

Canvas kesish

clip() - aylana shaklidagi kesish sohasini yarating. So‘ngra ikkita to‘rtburchak chizing clip() - uchburchak shaklidagi kesish sohasini yarating. So‘ngra ikkita to‘rtburchak chizing clip() - aylana shaklidagi kesish sohasini yarating. So‘ngra rasm chizing clip() - kesish sohasi sifatida ikkita to‘rtburchak yarating. evenodd qoidasidan foydalaning clip() - kesish sohasi sifatida ikkita to‘rtburchak yarating. nonzero qoidasidan foydalaning

Canvas kompozitsiyalash

globalCompositeOperation = "source-over" globalCompositeOperation = "source-out" globalCompositeOperation = "destination-over" globalCompositeOperation = "destination-atop" globalCompositeOperation = "lighter" globalCompositeOperation = "copy" globalCompositeOperation = "xor" globalCompositeOperation = "multiply" globalCompositeOperation = "screen" globalCompositeOperation = "darken" globalCompositeOperation = "lighten" globalCompositeOperation = "hue" globalCompositeOperation = "luminosity"

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish