Skapa animering med HTML5 Canvas Tag

February 18

Även om HTML5 canvas taggen inte kan ersätta Flash som en mekanism för att genomföra spel och animationer i webbläsaren är det ganska lätt att lägga animation till en duk bild. Nyckeln är att använda animeringsfunktioner som redan finns inbyggda i webbläsaren.

Grundläggande struktur av animeringen slingan i HTML5 duk

En animering kräver i allmänhet en särskild organisation som kallas en animation loop Grundstrukturen i animeringen slingan fungerar på samma på alla språk.:

  1. Initiering.

    Skapa tillgångarna, inklusive bakgrunden och något av de objekt som du kommer att använda. Objekt som ska manipuleras i realtid normalt kallas sprites. Generellt sker detta när programmet först körs, för att spara tid under huvud utförande. Du kan även ställa in konstanter för bildstorlek, visningsstorlek, bildfrekvens, och andra värden som inte kommer att förändras under utförandet av spelet.
  2. Bestäm en bildhastighet.

    Animationer och spel fungerar genom att ringa en funktion flera gånger vid en föreskriven hastighet. I JavaScript, använder du vanligtvis setInterval () för att ange en upprepad funktion. Bildhastigheten anger hur ofta den angivna funktionen kommer att kallas. Spel och animationer normalt körs vid bildhastigheter mellan 10 och 30 bilder per sekund. En snabbare bildfrekvens är mjukare, men kanske inte kunna upprätthållas med viss hårdvara.
  3. Utvärdera det aktuella läget.

    Varje sprite är verkligen ett dataelement. Under varje bildruta, avgöra om något viktigt har hänt: Gjorde användaren trycker på en tangent? Är ett element ska flytta? Gjorde en sprite lämna skärmen? Gjorde två sprites conk i varandra?
  4. Ändra sprite data.

    Varje sprite har generellt position eller rotationsdata som kan ändras under varje ram. Oftast sker detta genom transformationer (translation, rotation och skala), även om det ibland kan du växla mellan bilderna istället.
  5. Rensa bakgrunden.

    En animering är verkligen en serie bilder dras snabbt på samma plats. Vanligtvis måste du rensa bakgrunden i början av varje ram för att rensa ut den sista bildrutan image.
  6. Ritas alla sprites.

    Varje sprite ritas med hjälp av dess nya uppgifter. De sprites verkar flytta eftersom de är dras i en ny plats eller orientering.

Att skapa konstanter en animering funktion i HTML5 canvas

Bygga ett program som roterar en bild i en duk kräver flera partier av kod. Den första jobb är att ställa in de olika variabler och konstanter som beskriver problemet. Följande kod skapas utanför någon funktion eftersom det beskriver värden som kommer att delas mellan funktioner:

var ritning;
var con;
var goofyPic;
var vinkel = 0;
CANV_HEIGHT = 200;
CANV_WIDTH = 200;
SPR_HEIGHT = 50;
SPR_WIDTH = 40;

Ritningen variabeln kommer att hänvisa till duken elementet. Den con variabeln kommer att vara den ritning sammanhang är goofyPic bilden som skall roteras, och vinkeln kommer att användas för att avgöra hur mycket bilden är för närvarande roteras. De andra värdena är konstanter som används för att beskriva höjden och bredden på duken samt spriten.

Distribuera animeringen i HTML5 canvas

Använd kroppen onload mekanism för att starta upp lite kod så snart sidan har lästs in. Emellertid har den sida nu två funktioner. Init () funktionen hanterar initiering, och dragfunktionen () kommer att kallas flera gånger för att hantera själva animeringen. Här är koden i init-funktionen ():

Funktionen init () {
ritning = document.getElementById ("ritning");
con = drawing.getContext ("2d");
goofyPic = document.getElementById ("goofyPic");
setInterval (oavgjort, 100);
} // End init

Jobbet av init () funktion är att initiera saker. I just detta exempel är olika element (duken, sammanhanget, och bild) laddas i JavaScript variabler, och animeringen är inställd. Den setInterval () funktionen används för att ställa in huvud animation slingan. Det tar två parametrar:

  • En repeterbar funktion: Den första parametern är namnet på en funktion som kommer att kallas flera gånger. I detta fall kommer dragningen funktionen öppnas många gånger.
  • Ett fördröjningsvärde: Den andra parametern anger hur ofta funktionen ska anropas i millisekunder (1/1000 av en sekund). En försening på 100 kommer att skapa en bildhastighet på 10 bilder per sekund. En fördröjning av 50 kommer att orsaka en bildhastighet på 20 bilder per sekund, och så vidare.

Ge animering till den aktuella ramen i HTML5 duk

Dragningen () funktionen kommer att kallas många gånger i följd. I allmänhet är dess uppgift att rensa ram, beräkna nya Sprite stater, och rita om spriten. Här är koden:

Funktionen draw () {

// Klar bakgrund
con.fillStyle = "white";
con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH);
// Dra gränsen
con.strokeStyle = "red";
con.lineWidth = "5";
con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT);

// Ändra rotationsvinkeln
vinkel + = 0,25;
if (vinkel> Math.PI * 2) {
vinkel = 0;
}
// Starta en ny transformationssystem
con.save ();
con.translate (100, 100);
con.rotate (vinkel);
// Dra bilden
con.drawImage (goofyPic,
SPR_WIDTH / -2, SPR_HEIGHT / -2,
SPR_WIDTH, SPR_HEIGHT);
con.restore ();
} // End draw

Medan koden kan tyckas lite inblandade, inte riktigt göra det något nytt:

  1. Rensa bakgrunden.

    Kom ihåg att animeringen upprepas ritning. Om du inte rensa bakgrunden i början av varje bildruta, kommer du att se föregående ram ritningar. Använd sammanhanget s clearRect () för att rita en ny bakgrund, eller någon av de andra ritverktyg för att använda en mer komplex bakgrundsbild.
  2. Rita något nonsprite innehåll.

    Till exempel kan du använda strokeStyle, lineWidth och strokeRect () för att bygga en röd rektangulär ram runt duken. Observera att CANV_HEIGHT och CANV_WIDTH konstant hänvisar till den aktuella arbetsytan storleken.
  3. Ändra sprite staten.

    För att ändra rotationsvinkeln av bilden i exemplet, var variabeln kallas vinkeln som skapas utanför funktionen. (Det är viktigt att vinkeln skapades utanför funktionen sammanhanget så det kan behålla sitt värde mellan anrop till funktionen.) Du kan sedan lägga en liten summa att vinkla varje bildruta.

    När du ändrar en variabel (särskilt i en nästan oändlig loop som en animation), bör du kontrollera om randvillkor. Det största tillåtna vinkelvärde (i radianer) är två gånger pi. Om vinkeln blir större än så, återställs den till noll.

  4. Bygg en förvandling. Inrätta en ny förvandling med spar () metoden och använda rotate () och översätta () funktioner för att omvandla ett tillfälligt koordinatsystem.

    Många animationer är verkligen modifieringar av en förvandling. Bilden är inte förändras, bara omvandlingen som innehåller bilden.
  5. Rita bilden i mitten av den nya transformationen.

    Den drawimage () kommandot ritar bilden baseras på det övre vänstra hörnet av en bild. Om du ritar bilden i (0, 0) i den nya transformationen, bilden kommer att visas för att rotera runt sin övre vänstra hörnet. Vanligtvis kommer du vill ha en bild för att rotera runt sin mittpunkt. Dra bara bilden så dess centrum är i origo. Ställ X till noll minus hälften bildens bredd, och Y till noll minus hälften bildens höjd.
  6. Stäng omvandlingen. Använd återställningen () för att avsluta definiera den tillfälliga koordinatsystem.