Video: Messi dibujado con JavaScript usando Canvas @JoseCodFacilito 2024
Etiketten setter opp en del av skjermen som skal brukes som lerret for programstyrt grafikk. JavaScript-kode utfører alle tegning og manipulering av bildet. Følgende kode setter opp et lerretelement og gir en knapp.
Dette eksemplet krever HTML5 lerretstøtte, klikk på meg for å se en tegning.
lerretselementet gjør lite på egenhånd, du må bruke JavaScript for å trekke ut en tegningskontekst (et spesielt element som kan være tegnet på) og bruk metodene til det kontekstobjektet for å lage dynamisk grafikk. For eksempel, for å aktivere tegnet () -funksjonen når brukeren klikker på knappen, bruk denne koden:
funksjonstegn () {var myCanvas = dokument. getElementByID ("myCanvas"); var kontekst = myCanvas. getContext ("2D"); kontekst. fillStyle = "blue"; kontekst. strokeStyle = "rød"; sirkel (kontekst, 1, 1, 1); for (i = 1; i <= 200; i + = 2) {sirkel (kontekst, jeg, jeg, jeg, "blå"); sirkel (kontekst, 300-i, 200-i, jeg, "rød"); sirkel (kontekst, 300-i, jeg, jeg, "blå"); sirkel (kontekst, jeg, 200-i, jeg, "rød");} // ende for} // ende tegnefunksjon sirkel (kontekst, x, y, radius, farge) {kontekst. strokeStyle = farge; kontekst. beginPath (); kontekst. bue (x, y, radius, 0, matematikk. PI * 2, sant); kontekst. strekk ();} // ende sirkel
Utgangen av denne lerretskodekoden ser slik ut:
De fleste moderne nettlesere støtter noen form for lerretet direkte. For øyeblikket er det bare en 2D tegningskontekst tilgjengelig, men til slutt vil du kunne lage 3D-grafikk direkte i nettleseren.
Kontekstobjektet styrer alle de faktiske tegningsfunksjonene. Noen av hovedmetodene til kontekstobjektet inkluderer:
-
bue () : Tegner en bue (del av en sirkel) som en del av en bane. Buen er definert som en sirkel, med et senter og en radius, men også med begynnelses- og sluttvinkler. Hvis vinklene beskriver en full sirkel (0 til 2 ganger pi radianer), vil kommandoen bue tegne en full sirkel.
-
beginPath () : Begynner definisjonen av en bane. Normalt er en sti definert av en enkelt moveTo-kommando, etterfulgt av en serie lineTo-kommandoer, og avsluttet med et slag, lukkePath eller fylle.
-
closePath () : Kobler det siste punktet til en bane (tegnet med moveTo og lineTo-kommandoer) til den første, og oppretter en lukket form som kan fylles.
-
drawImage () : Lar deg tegne et bilde (fra en ekstern bildefil) på lerretet. Mange implementeringer tillater pikselnivåhåndtering, slik at du kan bruke egendefinerte filtre og transformasjoner til bildene dine, noe som gir langt mer kontroll enn den typiske
-taggen. -
fill () : Denne kommandoen (og dens varianter, for eksempel fillRect) lar deg bruke den gjeldende fyllestilen til elementer som er tegnet på skjermen.
-
fillRect () : Bygger et rektangel med en spesifisert størrelse og posisjon, fylt ut med gjeldende fyllestil.
-
fillStyle () : Lar deg angi fyllestilen. Dette kan være en standardfargeverdi eller en forhåndsdefinert gradient.
-
lineTo () : Sammen med moveTo-kommandoen, lar dette deg bygge en bane på skjermen. LineTo-kommandoen tar et poeng som input og trekker fra et tidligere definert punkt til det nåværende punktet. Legg merke til at banen ikke vises før søknaden av strekkfunksjonen.
-
lineWidth () : Dette definerer bredden på linjen som tegnes av en slagkommando.
-
moveTo : Brukes i bandefinisjon for å angi utgangspunktet for en bane.
-
slag () : Tegner den nåværende definerte banen. Legg merke til at stier ikke umiddelbart er tegnet; Strokekommandoen trekker faktisk banen på skjermen.
-
strokeRect () : Tegner et ufylt rektangel.
-
strokeStyle () : Bestemmer stilen til neste slag som skal tegnes. De fleste tegningskontekstene støtter stiplede og stiplede slagstiler, men det forventes mer.
-
tekst : Noen implementeringer av lerret-taggen tillater tekstmanipulering. Denne støtten er ujevn, men det er sannsynlig å bli vanlig i fremtidige implementeringer.
lerretet er et av de viktigste nye funksjonene i HTML5, da det gir nesten ubegrenset kontroll over det visuelle grensesnittet. Spillutviklere har begynt å lage online spill med lerretet, og det har allerede blitt grunnlaget for flere innovative brukergrensesnitteksperimenter (spesielt Google maps).
