Cuprins
Cu diferitele metode de desenate în pânză Este posibil să se definească zone din interiorul lor pentru a desena, deși acest lucru este puțin mai complex, este total fezabil, totuși avem și posibilitatea de a obține același rezultat folosind metoda clip ().Un alt aspect care poate fi, de asemenea, încorporat în panza este desenul textului, poate credem că folosind CSS și alte elemente putem desena un text care să aibă același aspect sau mai bine, oricum ar fi în pânză ne permite să aplicăm animații native în HTML5.
Metoda clipului
După cum am menționat la început, această metodă simplifică calea către cum putem crea o secțiune într-o pânză, pentru a putea introduce alte elemente desenate, cum ar fi un desen nou sau umple-l cu o culoare specifică.
Pentru a utiliza acest instrument trebuie să apelăm metoda clamă (), ceea ce face această metodă este să creeze o regiune de tăiere sau o nouă secțiune, să vedem în următorul cod cum funcționează:
Exemplu Browserul dvs. nu acceptă elementul pânză În acest cod desenăm mai întâi un dreptunghi mare în galben, apoi creăm o nouă regiune în interiorul acestuia folosind metoda clip () iar în această regiune generăm un nou dreptunghi roșu.
Să vedem cum arată acest lucru în browserul nostru:
De asemenea, putem desena text într-o pânză, pentru aceasta avem următoarele metode:
fillText (, x, y, lățime): Desenează și umple textul specificat în primul parametru la poziția (x, y). De asemenea, argumentul său lăţime este opțional, dar când este declarat, stabilește o limită pentru lățimea textului.
strokeText (, x, y, lățime): Desenează și lasă textul fără umplutură în poziția (x, y). La fel ca metoda anterioară în argumentul său opțional, limitează lățimea textului.
Să vedem următorul exemplu despre cum să folosim aceste metode pentru a desena text pe pânza noastră:
Exemplu Browserul dvs. nu acceptă elementul pânză În acest cod folosim ambele metode pentru a desena același text, ambele în aceeași poziție, dar cu o culoare diferită, cu care obținem efectul unui cadru exterior de o culoare și a unei umpluturi de altă culoare, cu aceasta putem stabili o mai mare diferență marcată între fillText Da strokeText.
În cele din urmă și pentru a finaliza acest tutorial să vedem cum arată în browser.
