Tęsdami įrašus apie HTML Canvas, šiandien aptarsime keletą elementų kurie tikrai pravers jums jei norite svetainėje naudoti specifinius šriftus ar sukurti foną einantį nuo tamsios iki šviesios spalvos.
Straipsnyje neaptarinėsime kaip pradėti dirbti su <canvas> elementu, tam galite paskaityti straipsnį – HTML5 Canvas. Paprasto kvadrato braižymas.
Canvas Tekstas
Naršyklėse kuriose palaikomas šis metodas:
- Internet Explorer 7.0+*
- FireFox 3.0+
- Safari 3.0+
- Chrome 3.0+
- Opera 10.0+
- iPhone 1.0+
- Android 1.0+
* – Internet Explorer 7 ir 8 reikalauja kad būtų jam skirtas plėtinys. Pati naršyklė šio metodo neapdoroja pilnai. Geriausia naudoti papildomą plėtinį explorercanvas Nuo 9 versijos jau nebereikia.
Canvas gali braižyti ne tik linijas, bet tuo pačiu ir tekstus. Taip pat reikia prisiminti kad braižant tekstus su canvas, nėra jokių CSS elementų kurie yra naudojami paprastai. T.y. negalėsite/neveiks tokie CSS modeliai kaip: float, margin, padding, word-wrapping. Jūs galėsite nurodyti keletą šrifto atributų kurie bus naudojant paišyti tekstą.
Šrifto atributai kurie galimi braižant tekstus:
- font – gali būti visi galimi CSS font stiliaus atributai. T.y. tokie kaip: font-weight, font-size,line-height ir font-family.
- textAlign – tai nurodo teksto lygiavimą. Panašus į CSS text-align, bet nėra identiškas. Galimos reikšmės jam yra: start, end, left, right, center
- textBaseline – nurodyti nuo kurios vietos yra paišomas tekstas. Galimos reikšmės yra: top, hanging, middle, alphabetic, ideographic, bottom
- fillText(tekstas,x,y,w) – Metodas skirtas braižyti nurodytą tekstą. X ir Y yra koordinatės kur braižomas tekstas, W yra teksto aukštis.
Kad jau apšnekėjom truputi bendrą dalį, pabandykime sukurti savo tekstą su canvas.
Įsivaizduokime kad norime nubrėžti paprastam grafikui rodykles su X ir Y koordinatėmis. Vienos koordinatės bus parodytos viršuje, kitos apačioje. T.y. parodysime kur kokie pikseliai randasi.
Žinoma galima tiesiog rašyti atitinkamas koordinates, įvesti pikselius kur tai viskas bus nupaišoma, bet yra toks kintamasis kaip textBaseline kuris aprašytas truputi aukščiau. Taigi užtenka nurodyti kad mes tekstą braižysime viršuje.
context.textBaseline = "top"; |
Galiausiai galima nurodyti savo tekstą kurį norime nupiešti:
context.fillText("( 0 , 0 )", 8, 5); |
Taip pat atliekame ir su kitu tekstu, tik šiuo atveju jis mums reikalingas apačioje dešinėje pusėje. Tam atvejui naudosime textAlign kintamąjį kuris nurodo kurioje pusėje yra braižomas tekstas:
canvas.textAlign = "right"; canvas.textBaseline = "bottom"; canvas.fillText("( 500 , 375 )", 492, 370); |
Taigi gavome skirtinguose kampuose nupieštus tekstus su canvas. Galite braižyti ką tik norite, HTML5 canvas palaiko visą koduotę ir nubraižys be didelių keblumų kad ir japoniškas raides.
1 komentaras