Lære det grunnleggende om HTML5 lerret

Forfatter: John Stephens

Opprettelsesdato: 27 Januar 2021

Oppdater Dato: 17 Kan 2024

Lære det grunnleggende om HTML5 lerret - Kreativ

Innhold

01. Bli vennlig med lerretelementet
02. Nettleserstøtte for lerret
03. 2. gjengivelseskontekst
04. Koordinatsystemet
05. Få tilgang til 2d-gjengivelsessystemet
06. Tegning av grunnleggende former og linjer
07. Linjer
08. Sirkler
09. Stil
10. Endring av linjebredde
11. Tegningstekst
12. Slette lerretet
13. Bredde / høydetrikset
14. Å lage lerret fyller nettleservinduet
15. Oppsummering
Likte dette? Les disse!

Kunnskap som trengs: Grunnleggende JavaScript og HTML5
Krever: jQuery
Prosjekt Tid: 1-2 timer
Støttefil

Dette utdraget er kapittel 3 i Foundation HTML5 Canvas: For Games and Entertainment av Rob Hawkes.

Nå skal du allerede ha en god ide om hva lerret er og hvorfor det er en fantastisk del av HTML5. I denne artikkelen vil vi ta en ordentlig titt på funksjonene til HTML5-lerret, fra å lære å faktisk få det inn i et HTML-dokument til å tegne former og andre typer objekter på det. Vi vil også se på hvordan vi kan endre hvordan figurer og objekter tegnes på HTML5-lerret, samt finne ut hvordan du kan slette det. Til slutt vil vi avslutte med et eksempel som viser deg hvordan du lager lerret av samme størrelse som nettleservinduet, en integrert ferdighet å utvikle oppslukende spill. Jeg håper ved slutten av denne opplæringen at du føler deg enda mer begeistret for HTML5-lerret og mulighetene det åpner seg foran deg.

01. Bli vennlig med lerretelementet

Akkurat som video og lyd bruker HTML5 lerretelementet absolutt ingen eksterne plugin-moduler eller voodoo for å gjøre tingene sine. Alt du trenger er litt HTML og en sprinkling av JavaScript med tillatelse til 2d-gjengivelses-kontekst-API. Ikke bekymre deg hvis du ikke har en anelse om hva 2d-gjengivelseskontekst-API er akkurat nå - du vil være ekspert på det snart nok.

Å bruke lerretelementet er enkelt - og jeg mener virkelig, egentlig enkel. Følgende kode er alt du trenger for å komme i gang med den:

lerret bredde = "500" høyde = "500">
! - Sett inn reserveinnhold her ->
/ lerret>

Jeg antar at jeg burde være ærlig og fortelle deg at dette faktisk ikke gjør noe spektakulært. Alt det gjør er å opprette et nytt tomt lerretelement, men du vil ikke kunne se noe ennå fordi du ikke har gjort noe med 2d-gjengivelseskonteksten. Vi fortsetter å tegne ting på lerretet om kort tid, noe som også er enkelt.

For nå er det viktig å merke seg bredde og høyde attributter som brukes når du oppretter lerretelementet. Disse attributtene definerer åpenbart størrelsen på lerretelementet, som igjen definerer størrelsen på 2d-gjengivelseskonteksten. Uten å definere en størrelse som denne, vil lerretselementet og 2d-gjengivelseskonteksten settes til henholdsvis standardbredde og høyde på 300 x 150. Senere i dette kapittelet vil vi se på måtene å lage et lerretelement som endrer størrelse dynamisk og fyller hele nettleservinduet.

Merk: Plasseringen til HTML5-lerretelementet defineres av plasseringen i HTML-dokumentet. Den kan flyttes rundt med CSS etter behov, akkurat som andre HTML-elementer.

02. Nettleserstøtte for lerret

De fleste moderne nettlesere støtter HTML5-lerretelementet og flertallet av funksjonene, men det er ikke overraskende at Internet Explorer ikke gjør det, i det minste ikke i noen versjon tidligere enn Internet Explorer 9. Hvis du er fornøyd med dette faktum i livet , så kan du legge inn en passende melding i reserveinnholdet for lerretelementet som lar de fattige IE-brukerne vite at de bør oppgradere. Det andre alternativet er å bruke det fantastiske ExplorerCanvas-skriptet, som er utviklet av noen boffins hos Google. Det fine med denne metoden er at du bare trenger å inkludere ett skript på websiden din, og lerretelementet vil fungere i Internet Explorer-nettlesere før versjon 9.

Hvis dette er noe du er interessert i, bør du laste ned skriptet fra ExplorerCanvas-nettstedet og følge instruksjonene for installasjon.

03. 2. gjengivelseskontekst

Lerretselementet er ikke den kule delen av lerretet; den anerkjennelsen faller inn i den andre gjengivelseskonteksten, det fantastiske som du trekker absolutt alt på. Hensikten med lerretelementet er å fungere som en omslag rundt 2d-gjengivelseskonteksten, og gir deg alle nødvendige metoder og saftig funksjonalitet for å trekke på og manipulere den. Det er veldig viktig å forstå dette, så la meg gjøre det klart: du trekker frem til 2d-gjengivelseskonteksten, ikke lerretelementet. Du får tilgang til og viser 2d-gjengivelseskonteksten gjennom lerretelementet. Jeg forventer ikke at dette gir full mening ennå, håpet mitt er at ting vil rydde opp litt når du sitter fast i å bruke lerretet for deg selv.

04. Koordinatsystemet

2d-gjengivelseskonteksten er en standard skjermbasert tegningsplattform. Som andre 2d-plattformer bruker den et flatt kartesisk koordinatsystem med opprinnelsen (0, 0) øverst til venstre. Å flytte til høyre vil øke x-verdien, og å bevege seg nedover vil øke y-verdien. Å forstå hvordan koordinatsystemet fungerer er integrert hvis du vil at ting skal trekkes på rett sted.

En enkelt enhet i koordinatsystemet tilsvarer vanligvis 1 piksel på skjermen, slik at posisjonen (24, 30) vil være 24 piksler til høyre og 30 piksler ned. Det er noen anledninger der en enhet i koordinatsystemet kan være lik 2 piksler, som med HD-skjermer, men den generelle tommelfingerregelen er at 1 koordinatenhet tilsvarer 1 skjermpiksel.

05. Få tilgang til 2d-gjengivelsessystemet

Det nytter ikke å prøve å forklare dette med ord når vi bare kan begynne å bruke det. Så la oss gjøre nettopp det ved å lage en grunnleggende HTML-webside med et tomt lerretselement:

! DOCTYPE html>

html>
hodet>
tittel> Lære det grunnleggende om lerret / tittel>
meta charset = "utf-8">

skripttype = "text / javascript" src = "http: //ajax.googleapis.com
/ajax/libs/jquery/1/jquery.min.js "> / script>

skripttype = "text / javascript">
$ (dokument). klar (funksjon () {

});
/ skript>
/ hode>

kropp>
canvas id = "myCanvas" width = "500" height = "500">
! - Sett inn reserveinnhold her ->
/ lerret>
/ kropp>
/ html>

Du vil ikke se noe hvis du kjører det slik det ser ut, så la oss få tilgang til 2d-gjengivelseskonteksten slik at vi kan begynne å tegne ting. Plasser følgende inne i jQuery-setningen, akkurat som vi gjorde med de forrige JavaScript-eksemplene:

var lerret = $ ("# myCanvas");
var context = canvas.get (0) .getContext ("2d");

Alt vi gjør her er å tilordne lerretelementet til en variabel, og deretter tildele den andre gjengivelseskonteksten til en annen variabel ved å ringe getContext metode. Jeg må påpeke at fordi vi bruker jQuery, må vi ringe get-metoden slik at vi får tilgang til DOM for lerretelementet, derfra har vi da tilgang til lerretet getContext metode. Jeg vil ikke bekymre meg for mye om å prøve å forstå hvorfor: bare vær oppmerksom på at get-metoden ikke har noe med selve lerretet å gjøre.

Nå har vi en variabel som inneholder 2d-gjengivelseskonteksten vi kan begynne å tegne ting. Spennende tider! Legg til følgende linje etter å ha erklært kontekstvariabelen:

context.fillRect (40, 40, 100, 100);

Hvis du oppdaterer siden, vil du se at noe fantastisk har skjedd; en svart firkant har dukket opp!

Du har nettopp tegnet ditt første element ved hjelp av lerret. Føles bra, ikke sant? Firkanten er svart fordi det er standardfargen på elementer tegnet med lerret; vi ser på hvordan du bruker noe annet enn standardfargen senere i dette kapittelet.

06. Tegning av grunnleggende former og linjer

Som du kan se, er det ganske greit å tegne en firkant; det er bare en linje med kode, den fillRect metode:

context.fillRect (40, 40, 100, 100);

Det åpenbare du vil legge merke til er at metoden kalles fillRect og ikke fillSquare. Jeg er sikker på at de fleste av dere allerede vet at et kvadrat faktisk er et rektangel med sider av samme lengde, men for de som ikke gjør det, er et kvadrat faktisk et rektangel med sider av samme lengde!

Det er fire argumenter som trengs for å lage et rektangel. De to første er (x, y) koordinatverdiene for kvadratets opprinnelse (øverste venstre hjørne), og de to siste er bredden og høyden på rektangelet. Bredden på et rektangel tegnes til høyre for (x, y) -posisjonen, og høyden på rektangelet tegnes nedover fra (x, y) -posisjonen. Du kan se hvorfor det er viktig å vite hvordan koordinatsystemet fungerer, ellers har du antatt at høyden ville trekke oppover fra (x, y) -posisjonen. De fillRect metoden kan skrives om slik for å visualisere argumentene:

context.fillRect (x, y, bredde, høyde);

For å gi klarhet, endrer du bredden på kvadratet til 200, lagrer filen og oppdaterer siden.

For en overraskelse, det er et rektangel. Og å tegne rektangelet i en annen posisjon? Yup, bare endre (x, y) posisjonsverdier. For eksempel en x-posisjon på 200 og en y-posisjon på 300.

Dette er lerretets skjønnhet; det er latterlig enkelt å manipulere objektene du har tegnet, du endrer bare verdiene til et par argumenter.

Merk: Det virker ikke opplagt, men hvis du tegner noe med et opprinnelsespunkt utenfor dimensjonene til lerretelementet, vises det ikke på skjermen. Bare figurer tegnet med et opprinnelsespunkt, eller en del av formen inni lerretelementet, vil være synlige for deg.

Ved siden av fillRect er den strokeRect metoden, den onde tvillingen. Mens fillRect tegner et rektangel og fyller det med en farge (i vårt tilfelle svart), den strokeRect metoden tegner et rektangel og stryker det. Det er ikke å si det strokeRect gir den en beroligende klapp med hånden (det ville ikke være en ond tvilling hvis den var så fin); det betyr at omrisset av rektangelet har en linje tegnet rundt seg. Hvis du endrer fillRect eksempel å bruke strokeRect i stedet får du se hva jeg mener.

Rektangelet har nå en oversikt; det er effektivt hul. Nå er dette gøy og alt, men hva med at vi prøver noe litt mer eventyrlystne, som en fullverdig linje? Hvorfor ikke.

07. Linjer

Linjer er skapt litt annerledes enn former. De er faktisk kjent som stier. For å lage en enkel sti, må du først ringe start sti metode for 2d-gjengivelseskontekst, som effektivt sier: "Gjør deg klar, vi er i ferd med å begynne å tegne en sti." Den neste metoden å ringe er flytte til, som angir (x, y) opprinnelse til banen vi skal tegne. Etter dette er en oppfordring til lineTo med (x, y) for destinasjonen til linjen vår, med en samtale til closePath for å tegne stien ferdig. Endelig en samtale til hjerneslag vil gjøre linjen synlig ved å tegne omrisset. Ved å sette alt sammen kommer du med noe sånt som dette:

context.beginPath (); // Start stien
context.moveTo (40, 40); // Still stiopprinnelsen
context.lineTo (340, 40); // Angi destinasjonen for stien
context.closePath (); // Lukk stien
context.stroke (); // Skissere stien

Som skal se slik ut, en fin og kjedelig rett linje:

Linjene trenger ikke å være horisontale eller vertikale, ved å endre (x, y) argumentene til lineTo metoden kan du gjøre den diagonal:

context.lineTo (340, 340);

Rette linjer er ikke veldig spennende alene, men de kan kombineres for å produsere komplekse former som er spennende. Jeg vil gå gjennom de avanserte funksjonene til stier i neste kapittel. For nå, la oss prøve noe annet. Hva med å tegne sirkler? De er definitivt litt mer spennende.

08. Sirkler

Det tar ikke noe geni å innse at sirkler er veldig forskjellige fra rektangler. Imidlertid, å vite dette, forklarer hvorfor det å skape en sirkel på lerret er veldig annerledes enn å lage et rektangel. En sirkel er en ganske kompleks form, og på grunn av dette er det faktisk ikke en spesiell metode i lerret for å lage en sirkel. Hva der er er en metode for å tegne buer, som er alt en sirkel egentlig er - en bue som er sammenføyd i begge ender. Det er litt forvirrende, så hva med at vi hopper inn og lager en sirkel på lerret:

context.beginPath (); // Start stien
context.arc (230, 90, 50, 0, Math.PI * 2, false); // Tegn en sirkel
context.closePath (); // Lukk stien
context.fill (); // Fyll stien

Du bør allerede kjenne igjen de to første og siste linjene. De starter og lukker banen (buen) og fyller den når vi er ferdige (fylle er ledsagermetoden til hjerneslag). Den saftige delen er den andre linjen, som gjør alt som er nødvendig for å tegne en sirkel. Det kan se litt komplisert ut, så la meg bryte det ned for deg.

Det er seks argumenter som brukes i opprettelsen av en bue; (x, y) koordinatverdiene for bueens opprinnelse (sentrum av sirkelen i vårt tilfelle), bueradien, startvinkelen, sluttvinkelen og til slutt en boolsk verdi som trekker buen mot med klokken hvis det er sant, eller med klokken hvis det er usant. De bue metoden kan skrives om på en mer lesbar måte slik:

context.arc (x, y, radius, startAngle, endAngle, mot klokken);

De tre første argumentene er selvforklarende, så jeg hopper forbi dem. Startvinkelen og endevinkelargumentene er tilsynelatende enkle, men de fortjener noen forklaringer for å forstå riktig hvordan de fungerer. Kort sagt er en bue i lerret definert som en buet bane som starter i en avstand fra (x, y) opprinnelsen lik radiusen, og er i vinkelen definert av startvinkelen. Banen slutter ved endevinkelen en radius fra (x, y) opprinnelse.

Det er viktig å merke seg at vinkler på lerret er i radianer og ikke grader, og uten å gå for mye i detaljer er det trygt å anta at 360 grader (en komplett sirkel) er 2π (pi multiplisert med 2) radianer. Folk som er mye flinkere enn meg, har funnet ut hvordan man konverterer fra grader til radianer, og de har kommet opp med følgende formel (skrevet i JavaScript for våre formål):

var grader = 1; // 1 grad
var radianer = grader * (Math.PI / 180); // 0,0175 radianer

Vi kommer til å bruke radianer gjennom hele boka, ettersom det sparer oss for å utføre unødvendige konverteringer fra grader, så for å gjøre ting enklere kan du bruke bildet nedenfor som en hurtigguide for vinkelen langs en sirkel i radianer.

For noe mer komplisert, bør du bruke formelen beskrevet tidligere.

Så nå vet du hvordan vinkler fungerer i lerret. La oss bringe fokus tilbake til sirkeleksemplet. Du kan se nå at startvinkelen er 0, begynnelsen på buen vår, og sluttvinkelen er Math.PI * 2 (pi multiplisert med 2); disse vinklene er starten og slutten av en sirkel. Hvis du ikke tror på meg, så sjekk ut bildet ovenfor.

Merk: For å få tilgang til verdien av pi i JavaScript bruker du Matte objekt, som er et spesielt objekt som lar deg gjøre alle slags kule mattebaserte ting. Vi bruker den i fremtiden til oppgaver som å generere tilfeldige tall.

Hvis du kjører eksemplet, bør du få en skjerm i nettleseren din slik:

En sirkel, hurra! Hva ville endevinkelen være hvis du ville tegne en halv sirkel i stedet? Sjekk bildet over hvis du vil. Det er riktig, det ville være enkelt og enkelt π, som ser slik ut i JavaScript:

context.arc (230, 90, 50, 0, Math.PI, false); // Tegn en halvsirkel

Hvis alt gikk bra, bør det ha en nydelig halvcirkel i nettleseren din.

Selv om det sjette argumentet i bue metoden er ment å være valgfri, vil Firefox kaste en feil hvis den blir utelatt. På grunn av dette er det verdt å holde det inne og definere en retning for å tegne buen.

Du kan fikle med vinklene hele dagen for å lage kvart sirkler, pizzaskiver - alle slags egentlig. Imidlertid overlater jeg det til deg hvis du vil leke med det. Vi har viktigere ting å komme videre med, som å endre fargen på ting!

09. Stil

Svart er det sist sesong. Hvis det bare var en måte å endre fargen på formene og linjene våre. Vent, det er det? Og det er veldig enkelt? Som en linje med kode enkelt? Rått! Jeg lyver forresten ikke om at det er enkelt. La oss hoppe rett inn og endre fargen på firkanten vi laget i begynnelsen av kapitlet.

context.fillStyle = "rgb (255, 0, 0)";
context.fillRect (40, 40, 100, 100);

Ved å stille inn fillStyle egenskapen til 2d-gjengivelseskonteksten, kan du endre fargen som former og baner er fylt ut som. I forrige eksempel tildeles en rgb (rød, grønn og blå) fargeverdi, selv om du også kan bruke en hvilken som helst gyldig CSS-fargeverdi, som en heksekode (f.eks. # FF0000 eller ordet "rød"). I eksemplet er fargen satt til rød (full rød, ingen grønn, ingen blå) og firkanten din skal se ut slik:

Jeg fortalte deg at det var lett, men ikke bli for spent, da det er en ulempe. Problemet er at innstilling av fillStyle egenskap betyr at alt du tegner etter innstilling, vil være i den fargen. Dette er ikke et problem hvis det er det du vil skal skje, men det er viktig å være oppmerksom på i tilfelle du bare ønsket å endre fargen på ett objekt. En måte å komme seg rundt dette på er å stille inn fillStyle eiendom tilbake til svart (eller en annen farge) når du har tegnet objektene dine på lerret, slik:

context.fillStyle = "rgb (255, 0, 0)";
context.fillRect (40, 40, 100, 100); // Rød firkant
context.fillRect (180, 40, 100, 100); // Rød firkant

context.fillStyle = "rgb (0, 0, 0)";
context.fillRect (320, 40, 100, 100); // Svart firkant

Som vil se slik ut i nettleseren:

Du kan også gjøre det samme med strykte former og stier ved å bruke strokeStyle eiendom. Følgende er for eksempel det samme som forrige eksempel, bortsett fra at det bruker strekede konturer i stedet for fyllinger:

context.strokeStyle = "rgb (255, 0, 0)";
context.strokeRect (40, 40, 100, 100); // Rød firkant
context.strokeRect (180, 40, 100, 100); // Rød firkant

context.strokeStyle = "rgb (0, 0, 0)";
context.strokeRect (320, 40, 100, 100); // Svart firkant

Merk: Det er ingenting som hindrer deg i å kombinere begge deler fillStyle og strokeStyle å gi en form en fylling og strek som er helt forskjellige farger.

Ikke noe komplisert her, det er alt veldig grunnleggende ting. Det er like enkelt å endre fargen på linjene også:

context.strokeStyle = "rgb (255, 0, 0)";
context.beginPath ();
context.moveTo (40, 180);
context.lineTo (420, 180); // Rød linje
context.closePath ();
context.stroke ();

context.strokeStyle = "rgb (0, 0, 0)";
context.beginPath ();
context.moveTo (40, 220);
context.lineTo (420, 220); // Svart linje
context.closePath ();
context.stroke ();

Og det er egentlig alt det er å endre farge på lerret.

10. Endring av linjebredde

Å endre farge er morsomt, men linjene våre har vært litt på den tynne siden. Heldigvis på lerret er det en metode for å fete dem litt, og det er den linje bredde egenskapen til 2. gjengivelseskontekst. Som standard er linje bredde eiendommen er satt til 1, men du kan sette den til hva du vil. La oss for eksempel endre bredden på de røde og svarte linjene:

context.lineWidth = 5; // Lag linjer tykke

context.strokeStyle = "rgb (255, 0, 0)";
context.beginPath ();
context.moveTo (40, 180);
context.lineTo (420, 180); // Rød linje
context.closePath ();
context.stroke ();

context.lineWidth = 20; // Gjør linjene enda tykkere

context.strokeStyle = "rgb (0, 0, 0)";
context.beginPath ();
context.moveTo (40, 220);
context.lineTo (420, 220); // Svart linje
context.closePath ();
context.stroke ();

Resultatet av dette er en litt tykkere rød linje og en altfor tykk svart linje:

Og linje bredde fungerer like bra på former:

context.lineWidth = 5; // Lag linjer tykk

context.strokeStyle = "rgb (255, 0, 0)";
context.strokeRect (40, 40, 100, 100); // Rød firkant
context.strokeRect (180, 40, 100, 100); // Rød firkant

context.lineWidth = 20; // Gjør linjene enda tykkere

context.strokeStyle = "rgb (0, 0, 0)";
context.strokeRect (320, 40, 100, 100); // Svart firkant

Som som du sikkert har gjettet, lager to litt tykkere røde firkanter med en altfor tykk svart firkant.

Du har praktisk talt mestret det grunnleggende nå, men det er fortsatt et par ting igjen å dekke før vi går videre til egentlig kule ting.

11. Tegningstekst

Canvas er ikke bare for grafikk og bilder, du kan også bruke det til å vise tekst. Selv om jeg skal være sannferdig, er det ikke mange anledninger der tegning av tekst med lerret er et bedre alternativ sammenlignet med å lage tekst ved hjelp av en mer tradisjonell HTML-elementtilnærming (som med et p-element). La meg forklare.

Tekst på lerret tegnes som et bilde, noe som betyr at den ikke kan velges med en musemarkør som vanlig tekst i et HTML-dokument - det er faktisk ikke tekst, det ser bare ut som det. Hvis du har brukt Microsoft Paint før, vil du forstå hva jeg mener; når teksten er tegnet, kan den ikke redigeres med mindre du sletter den og tegner den på nytt. Fordelen med å tegne tekst på lerret er at du kan bruke alle de fantastiske transformasjonene og annen funksjonalitet som følger med tegning på lerret. Jeg må imidlertid understreke at du ikke bør lage tekst på lerret med mindre du har en legitim grunn til ikke å lage den ved hjelp av normale, valgbare HTML-elementer. I stedet bør du bruke vanlige HTML-elementer for å lage tekst, og deretter legge dem over toppen av lerretet med CSS-posisjonering. Poenget her er at HTML ble bygget for å håndtere tekst (innhold), mens lerret er bygget for å håndtere piksler og grafikk.

Nå er det slik jeg kan vise deg hvordan du tegner tekst på lerret, det er veldig enkelt:

var text = "Hei, verden!";
context.fillText (tekst, 40, 40);

Det er alt du trenger for å tegne en tekststreng. De fillText metoden for 2d-gjengivelseskontekst tar fire argumenter (ett er valgfritt, så vi har utelatt det for nå); den første er tekststrengen du vil tegne, og den andre og den tredje er (x, y) koordinatverdiene for opprinnelsen til teksten (nederst til venstre). Jeg sa at det var enkelt.

Jeg vil ikke vise deg utdataene ennå, da det blir for lite til å se, det er fordi standard skriftinnstillinger for tekst på lerret er 10 px sans-serif (helt liten). Så la oss endre størrelsen nå, og mens vi er i gang, kan jeg like godt vise deg hvordan du endrer skrift. For å gjøre dette må du stille inn font egenskapen til 2. gjengivelseskontekst, slik:

var text = "Hello, World!";
context.font = "30px serif"; // Endre størrelse og skrift
context.fillText (tekst, 40, 40);

De font egenskap tar en strengverdi på nøyaktig samme måte som font eiendom i CSS. I forrige eksempel gir du pikselstørrelsen du vil at skriften skal være, etterfulgt av navnet på skriftfamilien du vil bruke. Du har satt den til serif, som betyr standardskrifttypen på datamaskinen som er en serif-font (noe som Times New Roman). Når det settes sammen skal det se ut slik:

Det er litt bedre, du kan faktisk lese det nå. Du kan til og med gjøre teksten kursiv hvis du virkelig ønsket å gjøre dette:

var text = "Hei, verden!";
context.font = "kursiv 30px serif";
context.fillText (tekst, 40, 40);

Alt som er endret her er at ordet kursiv er lagt til skriftstrengen.

Som den font eiendommen går, det er mange flere innstillinger du kan bruke, som linjehøyde og tilbakevendende fontfamilier. Jeg vil ikke dekke disse, men hvis du er interessert i å bruke tekst på lerret, foreslår jeg at du sjekker dem ut.

Merk: Som jeg håper du kan se, er det grunnleggende på lerret veldig selvforklarende. Årsaken til dette er at 2d rendering context API bruker metoder og egenskaper som er navngitt på en måte som gjør dem enkle å forstå. Det skal nå være fornuftig hvorfor jeg understreket viktigheten av å navngi variabler riktig i kapittel 2.

Før jeg går videre, la meg vise deg hvordan du lager streket tekst - dette er nyttig å vite:

var text = "Hei, verden!";
context.font = "kursiv 60px serif";
context.strokeText (tekst, 40, 100);

Denne gangen bruker du strokeText metode, som tar nøyaktig de samme parametrene som fillText. Det ser litt rart ut med en liten skriftstørrelse, så i dette eksemplet er størrelsen større og opprinnelsen har blitt flyttet litt ned slik at teksten ikke går fra toppen av skjermen. Det skal se litt ut som dette:

Generelt ser jeg ikke mye spenning ved å stryke tekst, men du kan ha et fantastisk prosjekt som bare ikke ville være komplett uten det. Hvis det er tilfelle, foreslår jeg at du slår deg ut og blir gal med det.

12. Slette lerretet

Å tegne på lerretet er veldig morsomt, men hva gjør du når du gjør en feil eller vil tørke skiferen ren og tegne noe annet? Heldigvis er det to alternativer til din disposisjon: clearRect metode, eller bredde / høydetrikset. La oss ta en titt på clearRect metode for 2d-gjengivelseskontekst først.

Si at du nettopp har tegnet en firkant og en sirkel på lerretet:

context.fillRect (40, 40, 100, 100);

context.beginPath ();
context.arc (230, 90, 50, 0, Math.PI * 2, false);
context.closePath ();
context.fill ();

Og du har nå bestemt, uansett årsak, at du vil tørke lerretet rent. For å gjøre dette er alt du trenger å ringe clearRect med (x, y) opprinnelsen til lerretet vårt, bredden og høyden. Hvis lerretet var 500 piksler bredt og 500 piksler høyt, ble samtalen til clearRect vil se slik ut:

context.clearRect (0, 0, 500, 500);

Som, når det kjøres, ikke viser noe i nettleseren, fordi du nettopp har tørket hele lerretet rent. Du kan også ringe clearRect når du ikke vet størrelsen på lerretet ved å bruke jQuery-bredde- og høydemetodene, slik:

context.clearRect (0, 0, canvas.width (), canvas.height ());

Som vil se slik ut i sin helhet:

var lerret = $ ("# myCanvas");
var context = canvas.get (0) .getContext ("2d");

context.fillRect (40, 40, 100, 100);

context.beginPath ();
context.arc (230, 90, 50, 0, Math.PI * 2, false);
context.closePath ();
context.fill ();

context.clearRect (0, 0, canvas.width (), canvas.height ());

Jeg har tatt med den originale lerretvariabelen i dette eksemplet bare for å minne deg om hvor vi kaller det fra i clearRect metode.

Merk: Lerretelementet gir deg faktisk bredde og høyde egenskaper, så det er opp til deg om du vil bruke jQuery-måten eller den rene JavaScript-måten å få tilgang til dimensjonene på lerretet.

Du trenger ikke å rydde hele lerretet; du kan like gjerne fjerne et bestemt område av det. Hvis vi for eksempel bare vil fjerne firkanten i eksemplet, vil du ringe clearRect som så:

context.clearRect (40, 40, 100, 100);

Som etterlater deg med en ensom sirkel.

Måten dette fungerer på er at argumentene i clearRect kan endres slik at et veldig spesifikt område blir ryddet. I vårt tilfelle har vi flyttet opprinnelsen til området vi vil slette (øverst til venstre) for å være øverst til venstre på firkanten (40, 40), og bredden og høyden på området vi vil slette er satt til kvadratets bredde og høyde (100). Resultatet er at bare et bestemt område rundt torget er satt til å bli ryddet. Du kan ganske enkelt fjerne sirkelen i stedet ved å endre argumentene til clearRect til følgende:

context.clearRect (180, 40, 100, 100);

Som, hvis beregningene våre er korrekte, skulle gi oss bare et kvadrat.

Husk at opprinnelsen til en bue er dens sentrum, så for å få riktig opprinnelse for clearRect metoden vi trenger for å ta bueopprinnelsen og trekke radien for både x og y.
Ikke at du noen gang trenger å gjøre dette, men det er ingenting som hindrer deg i å bare slette en del av et objekt på lerret:

context.fillRect (40, 40, 100, 100);

context.beginPath ();
context.arc (230, 90, 50, 0, Math.PI * 2, false);
context.closePath ();
context.fill ();

context.clearRect (230, 90, 50, 50);

Dette eksemplet skal ta et stort stykke ut av sirkelen din:

Denne teknikken brukes noen ganger for å tegne komplekse former raskt og enkelt ved å tegne en grunnleggende form og hugge biter av den.

13. Bredde / høydetrikset

Hvis du bare vil slette alt på lerretet og starte på nytt fra grunnen av, vil du kanskje vurdere bredde / høyde-trikset. Hvis jeg er ærlig, er dette egentlig ikke et triks, men snarere en potent og lite dokumentert metode for å tilbakestille et lerret til standard, frisk tilstand. Tanken er at når bredde- og høydeattributtene til et lerretelement er satt, når som helst, skal lerretet ryddes tilbake til sin opprinnelige tilstand. Denne metoden har noen ulemper, så la meg gi deg et eksempel:

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

context.fillRect (40, 40, 100, 100);

context.beginPath ();
context.arc (230, 90, 50, 0, Math.PI * 2, false);
context.closePath ();
context.fill ();

Dette vil tegne en rød firkant og sirkle på lerretet, ikke noe gal ennå. La oss nå legge til i nullstillingen på lerretet:

canvas.attr ("width", canvas.width ());
canvas.attr ("høyde", canvas.height ());

Det som skjer her er litt jQuery-magi. Du må endre bredde og høyde attributter til lerretelementet, så for å gjøre dette bruker du attr metode i jQuery. Mitt håp er at du nå skal være komfortabel nok til å gjette hva som skjer. Hvis ikke, sender vi navnet på attributtet vi vil redigere (bredde og høyde) etterfulgt av verdien vi vil sette den til (samme bredde og høyde som den var tidligere). Hvis alt gikk bra, skulle du se et tomt lerret.

Legg nå til følgende linje etter å ha ryddet lerretet med bredde / høyde-trikset:

context.fillRect (40, 40, 100, 100);

Sikkert burde dette tegne en rød firkant, ikke sant? (Husk: vi setter inn fillStyle eiendom tidligere.) Så hvorfor i all verden tegner den en svart firkant?

Ulempen med bredde / høyde-trikset er at absolutt alt på lerretet tilbakestilles, inkludert stiler og farger. Dette er grunnen til at du bare bør bruke dette trikset hvis du er forberedt på å tilbakestille lerretet helt, og ikke bare tørke av skjermen.

14. Å lage lerret fyller nettleservinduet

Fram til nå har lerretelementet hatt en fast bredde og høyde på 500 piksler, noe som er bra, men hva om vi ønsket å få det til å fylle hele nettleservinduet. Hvordan gjør du det? Vel, med et vanlig HTML-element kan du normalt stille inn bredde og høyde tilskriver 100%, og du er alle sortert. Imidlertid fungerer lerretelementet ikke på denne måten og ignorerer prosentandelen, tolker 100% som 100 piksler, 200% som 200 piksler, og så videre. Det kreves en annen metode.

Den enkleste måten å gjøre det på er å stille inn bredden og høyden på lerretelementet nøyaktig til pikselbredden og høyden på nettleservinduet. Vi kan få tilgang til bredden og høyden på vinduet ved å bruke vindu nettleserobjekt og litt jQuery-magi:

var lerret = $ ("# myCanvas");
var context = canvas.get (0) .getContext ("2d");

canvas.attr ("width", $ (window) .get (0) .innerWidth);
canvas.attr ("høyde", $ (vindu) .get (0) .innerHøyde);

context.fillRect (0, 0, canvas.width (), canvas.height ());

Grunnen til at jeg har brukt $ (vindu) .get (0) .innerHøyde i stedet for $ (vindu). høyde () er at sistnevnte ikke ser ut til å gi full høyde i alle nettlesere. Du vil merke at denne metoden faktisk ikke har fungert skikkelig, ettersom det fortsatt er et hvitt gap rundt lerretelementet og rullefelt i nettleservinduet:

For å fikse dette må vi bruke litt CSS, så åpne opp en ny fil i favoritt teksteditoren din og lagre den som canvas.css i samme katalog som HTML-dokumentet. Sett dette inn i CSS-filen og lagre den:

* {margin: 0; polstring: 0; }
html, kropp {høyde: 100%; bredde: 100%; }
lerret {display: block; }

Første linje tilbakestiller margen og polstringen av hvert HTML-element til 0, og fjerner den hvite rammen du kan se på skjermbildet ovenfor. Dette er ofte kjent som en CSS-tilbakestilling; det er mye bedre måter å gjøre det på, men dette vil tjene våre formål akkurat nå. Den andre linjen er ikke helt nødvendig, men sørger for at html og kropp elementene er i full bredde og høyde på nettleservinduet. Den endelige linjen endrer lerretelementet fra innebygd til blokk, noe som gjør at bredden på høyden kan stilles inn riktig, og igjen kan den ta hele bredden og høyden på nettleservinduet uten å forårsake rullefelt.

For å bruke denne CSS i HTML-dokumentet, må du legge til følgende linje før jQuery manus element, innsiden av hode element:

lenke href = "canvas.css" rel = "stylesheet" type = "text / css">

Denne lenker til CSS-filen du nettopp opprettet, og kjører stilene i den. Resultatet er et lerretelement som fyller nettleservinduet perfekt.

Dessverre er vi ikke ferdige ennå. Hvis du endrer størrelsen på nettleservinduet, vil lerretelementet holde seg i størrelsen det var før, og forårsake rullefelt hvis du krymper det for mye:

For å omgå dette må du endre størrelsen på lerretelementet i samme øyeblikk som nettleservinduet blir endret. Hvis bare jQuery hadde en endre størrelse metoden som ble avfyrt i det øyeblikket et nettleservindu ble endret, litt som hvordan klar metoden avfyres når DOM er klar. Heldigvis for oss har den en endre størrelse metode, og det gjør akkurat det!

$ (vindu) .resize (resizeCanvas);

funksjon resizeCanvas () {
canvas.attr ("width", $ (window) .get (0) .innerWidth);
canvas.attr ("høyde", $ (vindu) .get (0) .innerHøyde);
context.fillRect (0, 0, canvas.width (), canvas.height ());
};

endre størrelseCanvas ();

Det er ikke mye nytt her, mesteparten av koden har bare blitt flyttet litt rundt. Hovedtillegget er jQuery endre størrelse metoden som er satt til å kalle endre størrelseCanvas funksjon når nettleservinduet er endret. All funksjonaliteten du tidligere hadde for å stille inn bredden og høyden på lerretelementet, er flyttet til den funksjonen, inkludert tegningen av rektangelet på størrelse med lerretet (husk: endring av bredde og høyde vil nullstille lerretet, så alt har skal tegnes på nytt). Det siste tillegget er en samtale til endre størrelseCanvas funksjon for å starte ting når siden lastes inn for første gang.

Hvis du prøver det nå, vil du legge merke til at lerretelementet endres vakkert og ingen rullefelt vises. Det fungerer, bra gjort!

15. Oppsummering

Vi har dekket alle slags interessante ting i dette kapittelet, spesielt hvis du aldri har brukt lerret før. Du har lært hvordan du bruker lerretelementet, hvordan du tegner grunnleggende former og baner, og hvordan du endrer fargen på disse figurene og banene. Du har også lært hvordan du tegner tekst, sletter lerretet og hvordan du får lerret til å fylle nettleservinduet. Det er veldig mye, så jeg tror du bør klappe deg selv på ryggen og lage deg en ny kopp te for å la ting trekke inn.