Share
Dette er den første artikkelen i en serie som gir deg raskere med HTML5-lerretet, den plugin-less tegningsfunksjonaliteten som er innebygd i moderne nettlesere. I denne innledende artikkelen vil jeg vise deg hvordan du får tilgang til lerretelementet, tegne figurer, endre farger og slette ting. Det er en whistle-stop tur på grunnleggende om denne fantastiske nye webteknologien.
Serien blir en spennende tur, og en som jeg håper du nyter. Jeg antar at du allerede er komfortabel med JavaScript, men har liten eller ingen erfaring med lerret. Selv om du er ny til JavaScript, ikke vær redd, siden du fortsatt lærer noe fra disse artiklene.
Det er enkelt å bruke lerretet.
Når du tenker på lerret, tenker du nok på den nye HTML5 lerret element. Teknisk er dette bare halvparten av historien, men la oss glemme det for nå. De lerret elementet er det offentlige ansiktet til denne fancy nye funksjonen til nettleseren.
Bruker lerret elementet er dødt lett; Det er en enkel HTML-kode, med en definert bredde og høyde.
Dette gjør ikke mye enda. Faktisk, alt det gjør er å sette inn et gjennomsiktig lerret på siden din. Innholdet inne i lerret elementet er reserveinnhold, som bare vises hvis en nettleser ikke støtter lerret.
Nettleserstøtte for lerret er ganske utrolig.
Det er viktig å påpeke at nettleserens støtte for lerret er ganske utrolig. Hver moderne nettleser støtter den, inkludert den nyeste Internet Explorer.
Interessant, kan du bruke noen lerretfunksjonalitet i Internet Explorer versjon 8 og under, via ExplorerCanvas-plugin.
En viktig leksjon som jeg lærte med lerret er at du må eksplisitt sette bredde og høyde attributter av lerret element når du definerer dimensjonene. Ved å bruke CSS til å angi bredde og høyde, vil det effektivt føre til at lerretet skaleres opp (eller ned) til den størrelsen. Det er en logisk grunn bak dette; det er å gjøre med lerret elementet er en beholder for noe som kalles 2d-renderingskonteksten. Det er imidlertid bare viktig å vite at bruk av CSS for å angi dimensjonene på lerretet vil ha en merkelig effekt.
Jeg nevnte i den siste delen at lerret element er bare en halvdel av historien. Den andre halvdelen er 2d-renderingskonteksten; Den delen av lerret som lar deg gjøre de kule ting du faktisk kan se.
La meg gjøre en ting helt klart: Når du bruker lerret, drar du ikke på lerret selve elementet. I stedet trekker du faktisk på 2d-renderingskonteksten, som du får tilgang til gjennom de lerret element via JavaScript API. Det spiller ingen rolle i den store ordningen av ting, men det er nyttig å vite.
Hvis du har brukt noen 2d grafikkprogrammeringsspråk før (ActionScript, Processing, etc), vil du vite alt om skjermbaserte koordinatsystemer. 2d-renderingskonteksten i lerret er ikke annerledes; Den bruker et standard kartesisk koordinatsystem med opprinnelsespunktet (0, 0) øverst til venstre. Flytting til høyre øker verdien av x akse, mens du beveger deg nedover, øker verdien av y akser. Det er ganske greit.
En enhet i koordinatsystemet er lik en piksel på skjermen (i de fleste tilfeller).
For å faktisk bruke konteksten 2d-rendering, må du bruke JavaScript API. Den delen av API som du vil bruke, er getContext metode, slik som:
Lerret fra grunnen av
Merk: Du bruker jQuery her, men bare for å sjekke når DOM er klar. Bruk gjerne ditt favoritt JavaScript-bibliotek i stedet, eller legg koden nederst i dokumentet.
Som et resultat av å ringe getContext, de CTX variabel vil nå inneholde en referanse til 2d-renderingskonteksten. Dette betyr at du nå har alt på plass for å faktisk begynne å tegne på lerretet. Den morsomme delen!
Nå som du har tilgang til 2d-renderingskonteksten, kan du begynne å ringe tegningsmetodene til APIen. En av de mest grunnleggende er fillRect, som trekker et rektangel som er fylt ut i en bestemt farge (svart som standard).
Legg til følgende kode under CTX variabel fra tidligere:
ctx.fillRect (50, 50, 100, 100);
Dette vil tegne et svart firkant som er satt litt vekk fra venstre og toppkanter av lerretet, slik som:
Du har nettopp trukket din første form ved hjelp av HTML5 lerret. Føles bra, rett?
Merk: Du vil merke at du bruker rektangelmetoden til JavaScript API for å tegne firkanter. Dette er fordi det ikke finnes noen metoder i lerret for å tegne firkanter direkte, enkle fordi firkanter er rektangler (de har fire sider med rette vinkler mellom dem).
Det er fire argumenter i en samtale for å fylle ut:
Skrevet er pseudokode, fillRect ville se slik ut:
ctx.fillRect (x, y, bredde, høyde);
Den kule tingen er at du ikke er begrenset til bare fylte rektangler. Nei. Du kan også tegne strokede rektangler; det vil si rektangler med et omriss rundt dem. Til det du kan bruke strokeRect Metoden for JavaScript API, slik som:
ctx.strokeRect (50, 50, 100, 100);
Den bruker nøyaktig de samme argumentene som fillRect, og resultatet vil bli en nydelig oversikt over et kvadrat:
Enkel. Elegant. Lett. Det oppsummerer virkelig lerret. Alle metodene er enkle når man ser på hverandre, men når de brukes sammen, lar de deg tegne noen ganske fantastiske ting.
Bortsett fra rektangler (de eneste figurene som kan tegnes med en enkelt API-metode), har du baner. Stier lar deg tegne linjer, både rett buede, som kan kombineres for å skape ganske komplekse former.
Tegning av en enkel bane krever bruk av noen nye API-metoder:
Accentsconagua
beginPath starter en ny bane.flytte til Flytter punktet som banen er trukket fra.lineTo trekker en rett bane til dette punktet fra punktet definert i moveTo, eller punktet fra det siste anropet til lineTo.closePath lukker banen ved å koble det siste punktet til startpunktet.fylle fyller banen med en farge.hjerneslag skisserer banen.Prøv følgende kode:
ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.fill ();
Som vil tegne en trekantbane, og fylle den:
Du kan bruke det samme konseptet til å tegne en hvilken som helst annen form du vil ha. Den andre artikkelen i denne serien vil dekke mer avanserte baner i lerret, som buer (for å lage sirkler) og Bezier-baner (for å lage kule kurvede linjer).
Det viktige å huske akkurat nå er at stiene er ganske mye den eneste måten å tegne noe mer komplisert på enn et rektangel.
Hittil har alt du har tegnet blitt fylt eller strøket i svart. Hvor spennende! Heldigvis finnes det et par egenskaper i JavaScript API som lar deg endre fargen på figurene du tegner. Disse egenskapene er fyllstil og strokeStyle.
De er begge ganske selvforklarende, så la oss hoppe inn og endre fyllefargen til et rektangel:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (50, 50, 100, 100);
Dette gir deg et fint rødt firkant, slik som:
Eller du kan endre stokefarge på et rektangel:
ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Som vil gi deg et firkant med en rød oversikt:
Skjønnheten i fyllstil og strokeStyle er at de begge aksepterer normale CSS fargeværdier. Det betyr at du kan bruke RGB, RGBA, HSA, fargeord (f.eks. "Rødt") og heksadesimale verdier.
Det er verdt å peke på at endring av fargen i lerret ikke påvirker noe som allerede er tegnet. Hvis du for eksempel tegner et svart rektangel, endrer du fyllestilen til rød, og tegner et annet rektangel. Det første rektangelet vil fortsatt være svart.
Bortsett fra endring av farge, kan du også endre bredden på en strektegning. For å gjøre dette kan du bruke linje bredde Egenskapen til JavaScript API.
Ved å bruke koden fra forrige eksempel kan du endre bredden på oversikten:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Som vil gi deg et vakkert og tykt rødt slag:
Det samme konseptet fungerer også for stier. For eksempel kan du endre trekanten fra tidligere for å ha en tykkere oversikt:
ctx.lineWidth = 20; ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.stroke ();
Som vil gi deg en utrolig spennende trekant:
Det er også noen andre funksjoner i JavaScript API som lar deg endre måten linjer trekkes på. For eksempel, lineCap endrer måten slutten av en linje ser ut, og lineJoin endrer måten hjørnene i en linje ser ut. Du bør definitivt sjekke ut disse funksjonene (og mer) i lerretspesifikasjonen.
Det siste jeg vil lære deg, er hvordan du kan slette lerretet. Du har lært hvordan du tegner figurer, men ikke hvordan du faktisk skal kvitte seg med dem, noe som kan være pent darn nyttig.
Heldigvis er det enkelt å slette lerretet. du trenger bare en metode fra JavaScript API. Den metoden er clearRect, og jobben er å gjøre hver piksel i rektangelet gjennomsiktig.
I denne artikkelen er lerretet 500 piksler bredt og 500 piksler høyt, slik at du enkelt kan slette hele lerretet ved å ringe clearRect som så:
ctx.fillRect (50, 50, 100, 100); ctx.clearRect (0, 0, 500, 500);
Det er ingen bruk som viser deg et skjermbilde av dette, fordi hvis det virket, burde du se absolutt ingenting. Det fylte rektangelet blir faktisk trukket, men det blir umiddelbart fjernet, så du får ikke se det.
Merk: Argumentene i clearRect er det samme som fillRect; x, y, bredde og høyde.
Hvis du ikke er sikker på bredden og høyden på lerretet, kan du også slette det slik:
ctx.clearRect (0, 0, canvas.width, canvas.height);
Dette bruker bredde og høyde egenskaper av lerret elementet selv, noe som er utrolig nyttig og en mye bedre måte å gjøre ting på.
Du trenger ikke å slette hele lerretet hvis du ikke vil. Du kan ganske enkelt slette bare en liten del i stedet. For eksempel, tenk at du hadde et svart firkant tegnet ved siden av et rødt firkant:
ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Som ville normalt se slik ut:
Du kan slette det svarte torget og la det røde torget være intakt ved å legge til et anrop til clearRect under:
ctx.clearRect (50, 50, 100, 100);
Legg merke til hvordan denne ringen til clearRect definerer en posisjon og størrelse som er den samme som den svarte firkanten. Dette betyr i utgangspunktet at det bare vil endre pikslene i kvadratet til gjennomsiktig svart (slette dem):
Ganske fint, ikke sant? Å slette lerretet er ikke noe du vil bruke mye med statiske tegninger, men det er noe du vil bruke mye når du lærer å animere senere i denne serien.
Lerret er lett å bruke, raskt å lære, og dødt kraftig når du presser det til grensene.
Så, som jeg håper du kan se, lerret er en spesielt kraftig ny del av nettleseren. Det lar deg lage grafikk, bruke kode, og uten å bruke en enkelt plugin. Det er enkelt å bruke, det er raskt å lære, og det er dødt kraftig når du presser det til grensene.
I neste artikkel ser du på noen av de mer avanserte funksjonene i lerretet, som å tegne sirkler, buede stier og noe som kalles tegningstilstanden. Og hvis det ikke er nok, ser du senere i serien at du skal forvandle tegninger (som rotasjon og skala), hvordan å manipulere bilder, og slutte med en titt på hvordan å animere. Det kommer til å bli veldig spennende ting, stole på meg.
For nå håper jeg at jeg har gitt deg nok til å appetitten for lerret og å gå ut og lære mer om det. Lerret er en fantastisk teknologi som virkelig er verdt å forstå, selv om du ikke planlegger å bruke det med en gang.
