Animatie maken met de HTML5-canvastag - dummies

Hoewel de HTML5-canvastag Flash niet als een mechanisme voor het implementeren van games en animaties in de browser kan vervangen, is het redelijk eenvoudig om animatie toe te voegen aan een canvas afbeelding. De sleutel is om de animatiefuncties te gebruiken die al in de browser zijn ingebouwd.

Basisstructuur van de animatielus in HTML5-canvas

Een animatie vereist over het algemeen een speciale organisatie met de naam een ​​ animatielus. De basisstructuur van de animatielus werkt in elke taal hetzelfde:

1. initialisatie.

   Maak de items, inclusief de achtergrond en alle objecten die u gaat gebruiken. Objecten die in realtime worden gemanipuleerd worden normaal sprites genoemd. In het algemeen wordt dit gedaan wanneer het programma voor het eerst wordt uitgevoerd, om tijd te besparen tijdens de hoofduitvoering. U kunt ook constanten instellen voor de afbeeldingsgrootte, weergavegrootte, framesnelheid en andere waarden die tijdens de uitvoering van het spel niet zullen veranderen.

2. Bepaal een beeldsnelheid.

   Animaties en games werken door een functie herhaaldelijk te bellen met een voorgeschreven snelheid. In JavaScript gebruikt u meestal de functie setInterval () om een ​​herhaalde functie op te geven. De framesnelheid geeft aan hoe vaak de opgegeven functie wordt aangeroepen. Games en animaties worden meestal uitgevoerd met een framesnelheid van 10 tot 30 frames per seconde. Een snellere framesnelheid is vloeiender, maar is mogelijk niet te onderhouden met sommige hardware.

3. Evalueer de huidige status.

   Elke sprite is echt een data-element. Bepaal tijdens elk frame of er iets belangrijks is gebeurd: Heeft de gebruiker op een toets gedrukt? Moet een element bewegen? Heeft een sprite het scherm verlaten? Hebben twee sprites in elkaar gezeten?

4. Sprite-gegevens wijzigen.

   Elke sprite heeft over het algemeen positie- of rotatiegegevens die tijdens elk frame kunnen worden gewijzigd. Gewoonlijk gebeurt dit via transformaties (vertaling, rotatie en schaal), hoewel u in sommige gevallen soms tussen afbeeldingen kunt schakelen.

5. Wis de achtergrond.

   Een animatie is echt een serie afbeeldingen die snel op dezelfde plaats wordt getekend. Meestal moet u de achtergrond aan het begin van elk frame wissen om de afbeelding van het laatste frame te verwijderen.

6. Alle sprites opnieuw tekenen.

   Elke sprite wordt opnieuw getekend met behulp van de nieuwe gegevens. De sprites lijken te bewegen omdat ze op een nieuwe locatie of richting zijn getekend.

De constanten van een animatiefunctie maken in HTML5-canvas

Voor het bouwen van een programma dat een afbeelding in een canvas roteert, zijn verschillende batches code vereist. De eerste taak is om de verschillende variabelen en constanten in te stellen die het probleem beschrijven.De volgende code wordt buiten alle functies gemaakt, omdat deze waarden beschrijft die worden gedeeld tussen functies:

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

De tekenvariabele verwijst naar het canvaselement. De con-variabele is de tekencontext, goofyPic is de afbeelding die moet worden geroteerd en de hoek wordt gebruikt om te bepalen hoeveel de afbeelding momenteel wordt geroteerd. De andere waarden zijn constanten die worden gebruikt om de hoogte en breedte van het canvas te beschrijven, evenals de sprite.

De animatie implementeren in HTML5 canvas

Gebruik het body-onload-mechanisme om een ​​aantal code op te starten zodra de pagina is geladen. De pagina heeft nu echter twee functies. De functie init () verwerkt de initialisatie en de functie draw () wordt herhaaldelijk aangeroepen om de daadwerkelijke animatie af te handelen. Hier is de code in de functie init ():

function init () {drawing = document. getElementById ("tekening"); con = tekening. getContext ("2D"); goofyPic = document. getElementById ("goofyPic"); setInterval (draw, 100);} // end init

De taak van de functie init () is om dingen te initialiseren. In dit specifieke voorbeeld worden verschillende elementen (het canvas, de context en de afbeelding) geladen in JavaScript-variabelen en wordt de animatie ingesteld. De functie setInterval () wordt gebruikt om de hoofdanimatielus in te stellen. Er zijn twee parameters nodig:

• Een herhaalbare functie: De eerste parameter is de naam van een functie die herhaaldelijk wordt aangeroepen. In dit geval wordt de draw-functie vele malen aangeroepen.

• Een vertragingswaarde: De tweede parameter geeft aan hoe vaak de functie in milliseconden (1/1000 van een seconde) moet worden aangeroepen. Een vertraging van 100 creëert een framesnelheid van 10 frames per seconde. Een vertraging van 50 veroorzaakt een framesnelheid van 20 frames per seconde, enzovoort.

Animatie aan het huidige frame geven in HTML5-canvas

De functie draw () wordt vaak achter elkaar gebeld. Over het algemeen is het zijn taak om het frame leeg te maken, nieuwe sprite-statussen te berekenen en de sprite opnieuw te tekenen. Hier is de code:

functie draw () {// clear background con. fillStyle = "wit"; con. fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH); // teken rand con. strokeStyle = "rood"; con. lineWidth = "5"; con. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT); // verander de rotatiehoek + =. 25; if (hoek> Math. PI * 2) {angle = 0;} // start een nieuw transformatiesysteem con. opslaan(); con. vertalen (100, 100); con. roteren (hoek); // teken de afbeelding con. drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT); con. restore ();} // end draw

Hoewel de code enigszins betrokken lijkt, doet het niet echt iets nieuws:

1. Wis de achtergrond.

   Vergeet niet dat animatie herhaald tekenen is. Als u de achtergrond aan het begin van elk frame niet wist, ziet u de vorige frametekeningen. Gebruik de functie clearRect () van de context om een ​​nieuwe achtergrond te tekenen of een van de andere tekengereedschappen om een ​​complexere achtergrondafbeelding te gebruiken.

2. Teken niet-inhoud.

   U kunt bijvoorbeeld strokeStyle, lineWidth en strokeRect () gebruiken om een ​​rood rechthoekig kader rondom het canvas te maken. Houd er rekening mee dat de constanten CANV_HEIGHT en CANV_WIDTH verwijzen naar de huidige canvasgrootte.

3. Wijzig de sprite-status.

   Om de rotatiehoek van de afbeelding in het voorbeeld te wijzigen, werd de variabele hoek buiten de functie gemaakt. (Het is belangrijk dat de hoek buiten de functiecontext is gemaakt, zodat deze de waarde tussen aanroepen van de functie kan behouden.) Vervolgens kunt u een klein bedrag toevoegen aan de hoek van elk frame.

   Telkens wanneer u een variabele wijzigt (met name in een vrijwel eindeloze lus als een animatie), moet u de randvoorwaarden controleren. De grootste toegestane hoekwaarde (in radialen) is twee keer pi. Als de hoek groter wordt, wordt deze weer op nul gezet.

4. Bouw een transformatie. Stel een nieuwe transformatie in met de methode save () en gebruik de functies rotate () en translate () om een ​​tijdelijk coördinatensysteem te transformeren.

   Veel animaties zijn echte aanpassingen van een transformatie. De afbeelding verandert niet, alleen de transformatie die de afbeelding bevat.

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

   De opdracht drawImage () tekent de afbeelding op basis van de linkerbovenhoek van een afbeelding. Als u de afbeelding op (0, 0) van de nieuwe transformatie tekent, lijkt de afbeelding rond de linkerbovenhoek te draaien. Meestal wilt u dat een afbeelding rond het middelpunt roteert. Teken de afbeelding eenvoudig zodat het midden ervan de oorsprong is. Stel X in op nul min de helft van de breedte van de afbeelding en Y op nul min de helft van de hoogte van de afbeelding.

6. Sluit de transformatie. Gebruik de methode restore () om het tijdelijke coördinatensysteem definitief te definiëren.