Hvordan lage animasjon med HTML5 Canvas Tag

May 25  by Eliza

Selv om HTML5 lerret tag ikke kan erstatte Flash som en mekanisme for å gjennomføre spill og animasjoner i nettleseren, er det rimelig lett å legge til animasjon til et lerret bilde. Nøkkelen er å bruke animasjon funksjoner som allerede er bygget inn i nettleseren.

Grunnstrukturen i animasjonen sløyfe i HTML5 lerret

En animasjon krever vanligvis en spesiell organisasjon kalt en animasjon sløyfe Den grunnleggende strukturen i animasjon sløyfe fungerer på samme måte i alle språk.:

  1. Initialisering.

    Lag eiendeler, herunder bakgrunn og et av objektene du skal bruke. Objekter som skal manipuleres i sanntid er normalt kalles sprites. Vanligvis skjer dette når programmet først går, for å spare tid under hoved utførelse. Du kan også sette konstanter for bildestørrelse, skjermstørrelsen, bildefrekvens, og andre verdier som ikke vil endre seg under utførelsen av spillet.

  2. Bestem en bildefrekvens.

    Animasjoner og spill fungerer ved å kalle en funksjon gjentatte ganger på en fastsatt pris. I Javascript, du vanligvis bruker setInterval () -funksjonen til å spesifisere en gjentatt funksjon. Bildefrekvensen angir hvor ofte den angitte funksjonen vil bli kalt. Spill og animasjoner typisk kjøre på bildefrekvenser mellom 10 og 30 bilder per sekund. En raskere bildefrekvens er jevnere, men kan ikke være vedlikeholdsvennlig med noen maskinvare.

  3. Evaluere den nåværende tilstand.

    Hver sprite er virkelig et dataelement. Under hvert bilde, bestemme om noe viktig har skjedd: Visste brukeren trykker på en tast? Er et element skal flytte? Har en sprite forlate skjermen? Har to sprites conk inn i hverandre?

  4. Endre sprite data.

    Hver sprite har generelt stilling eller rotasjonsdata som kan endres i løpet av hver ramme. Vanligvis er dette gjort gjennom transformasjoner (oversettelse, rotasjon og skala), men noen ganger kan du veksle mellom bilder i stedet.

  5. Fjerne bakgrunnen.

    En animasjon er egentlig en serie bilder trukket raskt på samme sted. Vanligvis må du fjerne bakgrunnen i begynnelsen av hver ramme for å tømme ut den siste rammen image.

  6. Tegne alle sprites.

    Hver sprite er tegnet på nytt med de nye dataene. Sprites ser ut til å bevege seg, fordi de er trukket i et nytt sted eller orientering.

Opprette konstantene av en animasjon funksjon i HTML5 lerret

Bygge et program som roterer et bilde inne i et lerret krever flere grupper av kode. Den første jobben er å sette opp de ulike variabler og konstanter som beskriver problemet. Følgende kode er opprettet utenfor noen funksjoner fordi det beskriver verdier som vil bli delt mellom funksjoner:

Var tegning;
Var con;
Var goofyPic;
Var vinkel = 0;
CANV_HEIGHT = 200;
CANV_WIDTH = 200;
SPR_HEIGHT = 50;
SPR_WIDTH = 40;

Tegningen variabel vil referere til lerretet element. Den con variable vil være tegningen sammenheng er goofyPic bildet som skal roteres, og vinkelen vil bli benyttet for å bestemme hvor mye av bildet, er for tiden roteres. De andre verdiene er konstanter som brukes for å beskrive høyden og bredden av lerretet samt fantomet.

Distribusjon av animasjon i HTML5 lerret

Bruk kroppen onload mekanisme for å starte opp noen kode så snart siden er ferdig lastet. Imidlertid har siden nå to funksjoner. Init () -funksjonen håndterer initialisering, og uavgjort () -funksjonen vil bli kalt flere ganger for å håndtere selve animasjonen. Her er koden i init () funksjon:

funksjon init () {
tegning = document.getElementById ("tegning");
con = drawing.getContext ("2D");
goofyPic = document.getElementById ("goofyPic");
setInterval (uavgjort, 100);
} // End init

Jobben til init () funksjon er å initialisere ting. I dette eksempelet, er ulike elementer (lerret, den kontekst, og bildet) lastet inn Javascript-variabler, og animasjonen er satt opp. SetInterval () funksjonen brukes til å sette opp hoved animasjon loop. Det tar to parametre:

  • En repeterbar funksjon: Den første parameteren er navnet på en funksjon som vil bli kalt gjentatte ganger. I dette tilfellet vil trekningen funksjonen kalles mange ganger.
  • En forsinkelse verdi: Den andre parameteren angir hvor ofte funksjonen skal kalles i millisekunder (1/1000 av et sekund). En forsinkelse på 100 vil skape en bildefrekvens på 10 bilder per sekund. En forsinkelse på 50 vil føre til en bildefrekvens på 20 bilder per sekund, og så videre.

Å gi animasjon til den gjeldende rammen i HTML5 lerret

Trekningen () -funksjonen vil bli kalt mange ganger etter hverandre. Generelt, er dens oppgave å fjerne rammen, beregne nye sprite stater, og tegne sprite. Her er koden:

funksjon draw () {

// Klar bakgrunn
con.fillStyle = "hvit";
con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH);
// Trekke grensen
con.strokeStyle = "red";
con.lineWidth = "5";
con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT);

// Endre rotasjonsvinkel
vinkel + = 0,25;
if (vinkel> Math.PI * 2) {
vinkel = 0;
}
// Start en ny transformasjonssystem
con.save ();
con.translate (100, 100);
con.rotate (vinkel);
// Tegne bildet
con.drawImage (goofyPic,
SPR_WIDTH / -2, SPR_HEIGHT / -2,
SPR_WIDTH, SPR_HEIGHT);
con.restore ();
} // End uavgjort

Mens koden kan virke litt involvert, betyr det ikke egentlig gjøre noe nytt:

  1. Fjerne bakgrunnen.

    Husk at animasjonen gjentas tegning. Hvis du ikke fjerner bakgrunnen i begynnelsen av hver ramme, vil du se de tidligere ramme tegninger. Bruk sammenheng s clearRect () -funksjonen til å tegne en frisk bakgrunn, eller en av de andre trekkverktøy for å bruke en mer komplisert bakgrunnsbilde.

  2. Trekke noen nonsprite innhold.

    For eksempel kan du bruke strokeStyle, linjebredde, og strokeRect () for å bygge en rød rektangulær ramme rundt lerretet. Merk at CANV_HEIGHT og CANV_WIDTH konstanter se gjeldende lerret størrelse.

  3. Endre sprite tilstand.

    For å endre rotasjonsvinkelen av bildet i eksempel ble det variable kalles vinkelen laget utenfor funksjonen. (Det er viktig at vinkelen ble opprettet utenfor funksjonen sammenheng slik at den kan beholde sin verdi mellom samtaler til funksjonen.) Du kan deretter legge til en liten sum til vinkel hver ramme.

    Når du endrer en variabel (spesielt i en nesten endeløs løkke som en animasjon), bør du sjekke for grensebetingelser. Den største tillatte vinkelverdi (i radianer) er to ganger pi. Hvis vinkelen blir større enn at den tilbakestilles til null.

  4. Bygge en transformasjon. Sett opp en ny transformasjon med lagringen () -metoden, og bruke roterings () og oversette () funksjoner for å transformere en midlertidig koordinatsystem.

    Mange animasjoner er virkelig modifikasjoner av en forvandling. Bildet er ikke endrer seg, bare den transformasjon som inneholder bildet.

  5. Tegne bildet i sentrum av den nye transformasjon.

    Den drawImage () kommandoen tegner bildet basert på øverste venstre hjørne av et bilde. Hvis du tegner bildet i (0, 0) på den nye transformasjon, vil bildet ser ut til å rotere rundt sin øverste venstre hjørne. Vanligvis vil du ønsker et bilde å rotere rundt sin midtpunkt. Bare tegne bildet så sitt senter er i origo. Sett X til null minus halvparten av bildets bredde og Y til null minus halve bildets høyde.

  6. Lukk transformasjon. Bruk gjenopprette () metode for å avslutte definere den midlertidige koordinatsystem.