HTML5 pamoka: pieškite tekstą ant drobės su puošniais spalvomis, gradientais ir efektais

Turinys

• HTML5 teksto piešimo pagrindai
• Teksto piešimas šešėliu ant HTML5 drobės
• Teksto piešimas su gradientu ant HTML5 drobės
• Sukamasis tekstas HTML5 drobėje
• Daugiau HTML5 naudojimo būdų

Simeonas Visseris yra rašytojas, kuriam patinka nušviesti tokias temas kaip technologijos ir kelionės.

Šioje pamokoje aptarsiu įvairius efektus, kuriuos galite naudoti piešdami tekstą ant HTML5 drobės. Kai kurie iš jų jums primins gerai žinomus „Microsoft Word“ „WordArt“ efektus! Ši pamoka remiasi kita mano pamoka apie piešimo ant HTML5 drobės pagrindus. Šis ankstesnis straipsnis paaiškina HTML5 kodo reikšmę ir apima kitus HTML5 drobės pagrindus, pavyzdžiui, jo koordinačių sistemą.

HTML5 galite suteikti savo tekstui puošnią išvaizdą, pridėdami šešėlį, spalvotą gradientą ir pasukdami tekstą. Praktikuosime kiekvieną iš šių efektų, ir jei juos sujungsite, tai atrodys labai gražiai.

Pradėkime nuo pagrindinio tuščio HTML5 tinklalapio:

! DOCTYPE html> html> head> meta http-equiv = "Content-type" content = "text / html; charset = UTF-8"> title> HTML5 Tutorial: Teksto piešimas su išgalvotomis spalvomis ir efektais / title> / head> body> drobė id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

HTML5 teksto piešimo pagrindai

Galite piešti tekstą tam tikroje drobės vietoje naudodami „strokeText“ arba „fillText“. Kaip ir piešiant, „strokeText“ piešia tik teksto kontūrus, o „fillText“ taip pat nuspalvina teksto vidų. Šioms komandoms reikalingi trys argumentai: pats tekstas, x koordinatė, kur piešti tekstą, ir y koordinatė. Pradedantiesiems koordinatės yra apatiniame kairiajame langelio kampe, kuris supa pagrindinę teksto dalį. Galite jį pamatyti kaip pradžios tašką linijos, ant kurios piešiami teksto simboliai. Diskutuoti apie tai būtų savaime ir tai nepatenka į šios mokymo programos taikymo sritį.

Šriftą galime nurodyti naudodami konteksto šrifto atributą:

ctx.font = "paryškintas 36 taškų sans-serifas";

Tai yra šrifto, kuris turėtų būti naudojamas piešti tekstą, tekstinis aprašymas. Galite nurodyti stilių (paryškintas / kursyvas), dydį (36 tašk.) Ir šrifto arba šriftų šeimos pavadinimą (šiuo atveju šriftų šeima „sans-serif“). Galite nurodyti šriftą pagal pavadinimą (pvz., „Arial“), bet taip pat galite nurodyti šriftų grupę, kuri yra šriftų grupė. Kompiuteris, kuriame rodomas tinklalapis, nusprendžia, kuris iš tos šriftų šeimos bus. Vartotojai gali pakeisti savo interneto naršyklės nustatymuose naudojamą šriftą.

Pavyzdžiui, „sans-serif“ reiškia šriftų šeimą be šriftų. Pabandykite pakeisti serif arba monospace, kad pamatytumėte, kokį šriftą gaunate!

ctx.font = "paryškintas 36 taškų sans-serifas"; ctx.fillText („HubPages“, 10, 100);

Pirmiau nurodomas šriftas ir jis užpildo tekstą „HubPages“ toje vietoje (10, 100). Gerai, dabar mes turime šiek tiek teksto, bet tai dar nieko nuostabaus: tai tik juodas tekstas! Kaip ir bet kurią kitą formą, galite pakeisti „fillStyle“, kad pakeistumėte teksto spalvą. Įvedę šią eilutę prieš komandą fillText gausite raudoną tekstą:

ctx.fillStyle = "rgb (255, 0, 0)";

Teksto piešimas šešėliu ant HTML5 drobės

Šešėlio pridėjimas yra paprastas būdas padaryti tekstą šiek tiek puošnesnį. Turite nurodyti šešėlio spalvą ir nurodyti, kur šešėlis turėtų būti santykyje su tekstu (ar bet kokia kita to dalyko forma, nes toliau pateikiama informacija tinka viskam, ką piešiate ant HTML5 drobės).

Pakeiskite kodą, kad jis atrodytų taip:

ctx.font = "paryškintas 36 taškų sans-serifas"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText („HubPages“, 10, 100);

Kaip matote, turime „shadowColor“, „shadowOffsetX“ ir „shadowOffsetY“. „ShadowColor“ yra pilka, tačiau galite naudoti ir kitą spalvą. „ShadowOffsetX“ ir „shadowOffsetY“ perkelia šešėlį toliau nuo teksto apačios. Jei palikote juos abu ties 0, šviesa sklinda iš viršaus ir nematote šešėlio. Šios poslinkio vertės (tiek x, tiek y vertė 10) reiškia, kad šešėlis 10 žingsnių judinamas dešinėn ir žemyn išilgai abiejų koordinačių ašių (nebūtinai pikselių).

ctx.font = "paryškintas 36 taškų sans-serifas"; ctx.shadowColor = "rgb (190, 190, 190)"; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10; ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillText („HubPages“, 10, 100);

Tai puiki pradžia: turime spalvotą tekstą ir šešėlį. Bet mes galime daugiau. Pristatysime nuolydžius - tai gali iš tikrųjų sutrumpinti jūsų tekstus nuo paprastų iki puošnių!

Teksto piešimas su gradientu ant HTML5 drobės

Užuot užpildę savo tekstus viena spalva, galite juos užpildyti naudodami kelias spalvas. Tai vadinama gradientu, kai viena spalva palaipsniui teka į kitą. Mes naudosime tiesinį gradientą, kuris tai ir daro: mes nurodome dvi spalvas ir visos spalvos tarp jų automatiškai apskaičiuojamos. Tai suteikia gražiai spalvotą tekstą.

Pridėsime gradientą nuo raudonos iki geltonos. Tiesiog pakeiskite eilutę „fillStyle“ taip:

var gradient = ctx.createLinearGradient (0, 0, 150, 100); gradient.addColorStop (0, "rgb (255, 0, 0)"); gradient.addColorStop (1, "rgb (255, 255, 0)"); ctx.fillStyle = gradientas;

„FillStyle“ dabar yra gradientas, o ne spalva. Gradientą kuriame piešimo konteksto iškvietimu createLinearGradient. Jums reikia skirti du taškus, o tarp jų bus taikomas gradientas. Mes naudojame pradinį tašką (0, 0) ir pabaigos tašką (150, 100).

Tada nurodome spalvas naudodami „addColorStop“. Pirmasis argumentas nurodo, kiek spalva yra toli nuo pradinio taško. Tai yra vertė nuo 0 iki 1, kai 0 reiškia pradinį tašką ir 1 reiškia galinį tašką. Taigi 0 reikšmė reiškia jūsų nurodytą pradinio taško spalvą, 0,5 reikšmė reiškia pusiaukelę tarp nurodytų koordinačių ir 1 reikšmę galiniame taške. Pradiniam taškui suteikiame raudoną spalvą, o pabaigos taškui - geltoną spalvą. Mes naudojame dvi spalvas gradientui, bet jei norite, galite naudoti daugiau nei dvi spalvas.

Atminkite, kad šios koordinatės nepriklauso nuo jūsų teksto ir, jei nuspręsite pakeisti teksto vietą, tai tikriausiai atrodys kitaip, nes tada ji ieškos spalvų informacijos toje vietoje. Kai naudojate gradientą „fillStyle“, keičiate visų užpildymo komandų spalvas („fillText“, „fillRect“ ir kt.), Todėl jums reikia šiek tiek žaisti su gradiento ir teksto koordinatėmis, jei tai atrodo ne taip tu to nori.

Dabar iš tikrųjų atrodo puošniai. Mes turime dar vieną triuką ant rankovės ir tai yra transformacijų naudojimas tekstui pasukti.

Sukamasis tekstas HTML5 drobėje

Norėdami pasukti tekstą, tiesiog pridėkite komandą pasukti. Argumentas yra laikrodžio rodyklės sukimosi kampas radianais, todėl naudokite neigiamą vertę, kad suktumėte prieš laikrodžio rodyklę:

ctx.rotatas (-0,25);

Dabar turime savo galutinį rezultatą: puošnų tekstą su gradientu, šešėliu ir šiek tiek pasukimu!

Daugiau HTML5 naudojimo būdų

• HTML5 pamoka: ratų ir lankų piešimas
  Apskritimų ir lankų piešimas HTML5 gali būti nemenkas iššūkis. Šioje pamokoje paaiškinu, kaip nupiešti apskritimus ir lankus bei kaip matuojami lankų kampai. Šioje pamokoje yra daug pavyzdžių.

Šis straipsnis yra tikslus ir tikras, kiek autorius žino. Turinys skirtas tik informaciniams ar pramoginiams tikslams ir nepakeičia asmeninių ar profesionalių patarimų verslo, finansų, teisiniais ar techniniais klausimais.