Hoe te Animatie met de HTML5 Canvas Tag aanmaken

Hoewel de HTML5 canvas tag misschien niet vervangen Flash als een mechanisme voor de uitvoering van games en animaties in de browser, is het redelijk eenvoudig om de animatie voeg het beeld een doek om. De sleutel is om de animatie functies al in de browser ingebouwd gebruiken.

Basisstructuur van de animatie lus in HTML5 canvas

Een animatie vereist in het algemeen een speciale organisatie genaamd een animatie lus De basisstructuur van de animatie lus werkt hetzelfde in elke taal.:

  1. Initialisatie.

    Maak de activa, met inbegrip van de achtergrond en een van de objecten die u gaat gebruiken. Objecten die worden gemanipuleerd tijd worden gewoonlijk genoemd sprites. Meestal gebeurt dit wanneer het programma eerst uitgevoerd, om tijd te besparen tijdens de belangrijkste uitvoering. U kunt ook constanten voor beeldgrootte, beeldgrootte, frame rate, en andere waarden die niet zal veranderen tijdens de uitvoering van het spel in te stellen.

  2. Bepaal een frame rate.

    Animaties en games werken door te bellen naar een functie herhaaldelijk op een voorgeschreven snelheid. In JavaScript, u ​​doorgaans de setInterval () functie om een ​​herhaalde functie opgeeft. De framerate geeft aan hoe vaak de opgegeven functie wordt genoemd. Games en animaties draaien doorgaans bij framerates tussen 10 en 30 frames per seconde. Een snellere frame rate is gladder, maar mag niet te onderhouden met een aantal hardware.

  3. Evalueren van de huidige toestand.

    Elke sprite is echt een data-element. Tijdens elk frame, vast te stellen of er iets belangrijks gebeurd: Heeft de gebruiker op een toets? Is een element verondersteld om te verhuizen? Had een sprite verlaat het scherm? Had twee sprites conk in elkaar?

  4. Wijzigen sprite data.

    Elke sprite algemeen positie of rotatie gegevens tijdens elk frame kan worden gewijzigd. Meestal wordt dit gedaan door middel van transformaties (translatie, rotatie en schaal), maar soms kan je tussen de beelden in plaats wisselen.

  5. Duidelijk de achtergrond.

    Een animatie is echt een serie beelden op dezelfde plaats snel getrokken. Gewoonlijk zul je nodig hebt om de achtergrond te wissen aan het begin van elk frame om het beeld van de laatste frame's uit te wissen.

  6. Hertekenen alle sprites.

    Elke sprite opnieuw getekend met behulp van de nieuwe gegevens. De sprites lijken te bewegen omdat ze getekend op een nieuwe locatie of oriëntatie.

Het creëren van de constanten van een animatie-functie in HTML5 canvas

Het bouwen van een programma dat een beeld draait in een doek vereist een aantal batches van code. De eerste taak is het opzetten van de verschillende variabelen en constanten die het probleem te beschrijven. De volgende code wordt gecreëerd buiten elke functie, omdat het de waarden die worden gedeeld tussen functies beschreven:

var tekening;
var con;
var goofyPic;
var hoek = 0;
CANV_HEIGHT = 200;
CANV_WIDTH = 200;
SPR_HEIGHT = 50;
SPR_WIDTH = 40;

De tekening variabele zal verwijzen naar het canvas element. De con parameter is de tekening context, goofyPic het beeld te roteren, en de hoek worden gebruikt om te bepalen hoe het beeld dat momenteel wordt gedraaid. De andere waarden zijn constanten die de hoogte en breedte van het doek en de sprite beschrijven.

Het inzetten van de animatie in HTML5 canvas

Gebruik de body onload mechanisme voor het opstarten van een stukje code zodra de pagina is geladen. Echter, het heeft nu twee functies. De init () functie verwerkt initialisatie en de draw () functie wordt herhaaldelijk opgeroepen om de werkelijke animatie af te handelen. Hier is de code in de functie init ():

functie init () {
tekening = document.getElementById ("tekenen");
con = drawing.getContext ("2d");
goofyPic = document.getElementById ("goofyPic");
setInterval (draw, 100);
} // End init

De taak van de init () functie is om dingen te initialiseren. In dit specifieke voorbeeld worden verschillende elementen (het doek, de context, en het beeld) geladen in JavaScript variabelen, en de animatie is ingesteld. De setInterval () functie wordt gebruikt voor het opzetten van de belangrijkste animatie lus. Het duurt twee parameters:

  • A herhaalbare functie: De eerste parameter is de naam van een functie die herhaaldelijk worden genoemd. In dit geval zal de trekfunctie vaak worden genoemd.
  • A vertragingswaarde: De tweede parameter geeft aan hoe vaak de functie in milliseconden (1/1000 seconde) worden genoemd. Een vertraging van 100 zal een beeldsnelheid van 10 beelden per seconde te maken. Een vertraging van 50 veroorzaakt een framesnelheid van 20 frames per seconde, enzovoort.

Het geven van animatie om het huidige frame in HTML5 canvas

De draw () functie wordt vaak genoemd worden in successie. In het algemeen, haar taak is om het frame te wissen, te berekenen nieuwe sprite staten, en opnieuw tekenen van de sprite. Hier is de code:

functie draw () {

// Duidelijke achtergrond
con.fillStyle = "wit";
con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH);
// Grens trekken
con.strokeStyle = "rood";
con.lineWidth = "5";
con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT);

// De draaihoek te wijzigen
hoek + = 0,25;
if (hoek> Math.PI * 2) {
hoek = 0;
}
// Start een nieuwe transformatie systeem
con.save ();
con.translate (100, 100);
con.rotate (hoek);
// Teken het beeld
con.drawImage (goofyPic,
SPR_WIDTH / -2, SPR_HEIGHT / -2,
SPR_WIDTH, SPR_HEIGHT);
con.restore ();
} // End gelijkspel

Terwijl de code een beetje lijkt betrokken, het niet echt iets nieuws te doen:

  1. Duidelijk de achtergrond.

    Vergeet niet dat animatie wordt herhaald tekening. Als je niet de achtergrond duidelijk aan het begin van elk frame, zie je het vorige frame tekeningen. Gebruik clearRect () functie van de context om een ​​verse achtergrond, of een van de andere tekengereedschappen vestigen op afbeelding een meer complexe achtergrond gebruiken.

  2. Trekken elke nonsprite inhoud.

    Zo kunt u strokeStyle, lineWidth, en strokeRect () gebruiken om een ​​rood rechthoekig kader rond het doek op te bouwen. Merk op dat de CANV_HEIGHT en CANV_WIDTH constanten verwijzen naar de huidige grootte van het tekenpapier.

  3. Wijzig de sprite staat.

    De rotatiehoek van het beeld in het voorbeeld wijzigen, werd het variabele genaamd hoek die buiten de functie. (Het is belangrijk dat de hoek is gemaakt buiten de functie context dus het zijn waarde tussen oproepen naar de functie kan behouden.) U kunt vervolgens een kleine hoeveelheid aan op de hoek elk frame.

    Wanneer u een variabele veranderen (vooral in een vrijwel eindeloze lus als een animatie), moet u controleren of er randvoorwaarden. De grootste toegestane hoek waarde (in radialen) is twee maal pi. Als de hoek groter wordt dan dat, wordt op nul gezet.

  4. Bouw een transformatie. Het opzetten van een nieuwe transformatie met de methode save (), en gebruik de rotate () en vertalen () functies om een ​​tijdelijk coördinatensysteem transformeren.

    Veel activiteiten zijn echt modificaties van een transformatie. Het beeld verandert niet, alleen de transformatie die de afbeelding bevat.

  5. Teken de afbeelding in het midden van de nieuwe transformatie.

    De drawImage () commando tekent het beeld op basis van de linkerbovenhoek van een afbeelding. Als u het beeld te tekenen op (0, 0) van de nieuwe transformatie, het beeld zal verschijnen om te roteren rond zijn linkerbovenhoek. Meestal wil je een beeld te roteren rond zijn middelpunt. Trek gewoon het beeld zodat het centrum ligt aan de oorsprong. Set X op nul minus de helft van de breedte van de afbeelding, en Y tot minus de helft van de hoogte van de afbeelding op nul.

  6. Sluit de transformatie. Gebruik de methode restore () om te eindigen het definiëren van de tijdelijke assenstelsel.