Hvordan Draw og Animer grafikk med HTML5 lerret

July 8  by Eliza

En av de spennende nye deler av HTML5 er lerretet element. Ved hjelp av lerretet, kan du tegne Punktgrafikkene inne i nettleservinduet. Hva er enda mer imponerende og nyttig er at du kan skrive et program som vil tegne grafikk på fly inne i nettleservinduet.

Hvordan lerret arbeid?

Lerretet element skaper en container, eller lerret, hvorpå du kan tegne grafikk. Et enkelt eksempel på et lerret element som skaper en 300-pixel firkantet tegneområdet ser slik ut:

<Lerret id = "myDrawingArea" width = "300" height = "300"> </ lerret>

Når du har lerretet, må du skrive et manus, ved hjelp av Javascript, for å sette ting inne i tegneområdet. Bilder trukket inne et lerret element er svært forskjellige fra de statiske bilder som tradisjonelt brukes i nettsider, der du må opprette og laste opp grafikken til serveren før nettleseren laster dem til websider ved hjelp av img tag.

Bilder som er lastet med img tag kan ikke endres etter at de er vist i nettleseren. Webutviklere har noen mulighet til å flytte eller endre størrelsen på bildene, men hvis det er et bilde av katten din, for eksempel, er det ingen måte å forvandle det til et bilde av sykkelen.

Med grafikk, er situasjonen en helt annen. Fordi skriptet gjør tegningen etter at web siden lastes, kan grafikken være noe i det hele tatt, og det kan trekkes veldig fort. lerretet fungerer svært godt for å tegne diagrammer og grafer, men det kan også brukes til å manipulere bilder i sanntid, eller til å lage animasjon eller arbeide med videofiler.

Her er et enkelt eksempel på en Javascript-funksjon som vil trekke en solid rektangel når den brukes fra innsiden et HTML-dokument:

funksjon draw () {
Var lerret = document.getElementById ('lerret');
if (canvas.getContext) {
Var ctx = canvas.getContext ('2d');
ctx.fillRect (25,25,100,100);
}
}

Hva er lerret god for?

På grunn av sin evne til å manipulere grafikk svært raskt ved hjelp av programmer som kan kontrolleres med brukerundersøkelser, lerret Grafikken er ideell for gaming. Noen av de mest populære spillene som er laget med lerret inkludere

  • Slyngete er en enkel, men vanedannende, spill hvor du kontrollerer en peker som du beveger deg rundt for å unngå røde prikker og treffe gode prikker.
  • Canvas Rider er en vakker 2D rulle spill hvor du kontrollerer en pinne figur på en sykkel, riding over hundrevis av brukerskapte spor.
  • ZTYPE er et spill hvor du må skrive ord som de faller mot deg. Som du skriver bokstavene i hvert ord, de er skutt ut av himmelen.

lerretet er også bra for å lage grafer og diagrammer som oppdateres i sanntid ved hjelp av levende data, eller for å gjøre brukerne i å manipulere grafikk over nettet.

De potensielle bruksområder for HTML5 lerret er bare begrenset av din fantasi-og etter dine programmeringskunnskaper, selvfølgelig.

Fra august 2013 er lerretet element støttes av de fleste moderne nettlesere, inkludert IE9 (og nyere versjoner), Firefox, Chrome, Opera og Safari. Vær imidlertid oppmerksom på at brukere som kjører eldre eller mindre vanlige nettlesere vil trolig være ute av stand til å se eller samhandle med lerret-basert grafikk.