Canvas animatie

Het resultaat van deze training zie je in deze video, evenals de site van easelJS.

Het canvas is een nieuw HTML5 element. De tag wordt geplaatst met een ID. Dan kun je hem met een stijlblad vormgeven en met het script selecteren. De breedte en hoogte worden ingesteld.

Met javascript wordt een ster op het canvas getekend. Je maakt daarvoor de volgende stappen:

• maak het object mijnCanvas
• maak een van dat object een Stage() object voor createjs
• maak een variabele ster, welke een chreatejs Shape is
• geef de ster een lijndikte en lijnkleur
• maak van de ster een ster met drawPolyStar en geef daarvoor de positie, de straal, het aantal punten, de scherpte van de punten en de verdraaiïng mee
• voeg hem aan de stage toe en
• laat de stage updaten.

Met een for-lus kun je snel meerdere sterren op de stage plaatsen.
Je varieert in positie met Math.random(), grootte, en afnemende dekking.
Met compositeOperation = "lighter" gebruik je een filter dat overlappende lijnen laat oplichten.

We kunnen elke ster een tween-eigenschap meegeven.
Elke ster krijgt dan mogelijk zijn eigen eindpunt, en eigen tijd om de animatie te maken.
Om de animatie te laten lopen, moet voortdurend de stage worden ververst.
Hiervoor maken we de functie herhaal, die met een event "tick" wordt aangeroepen.

Als de laatste ster zijn positie bereikt heeft, hoeft de stage niet meer een update te krijgen.
Stoppen we dan het updaten, dan wordt de processor ontlast.
Daarom nemen we op het eind van de tween een callback-funktie op.
Deze zet een functie aan het werk, die het aantal actieve animaties met 1 vermindert.
Zijn alle animaties afgelopen, dan wordt er niet meer aan de voorwaarde voldaan dat de stage een update moet krijgen en hoeft er dus minder gewerkt te worden.

Nadat de sterren zijn geplaatst, zullen ze ook moeten reageren op een muisklik.
Hiervoor moeten ze oproepbaar zijn. Daarom plaatsen we ze in een array met de opdracht push().
Dan kun je ze later nog eens aanspreken.
Met een eventListener mouseup, wordt een functie gestart.
Daarin wordt weer een variabele gemaakt uit elk item uit de array.
Elk item kan vervolgens geanimeerd worden naar stage.mouseX en stage.mouseY.
Om de nieuwe animatie te kunnen zien, moet de stage weer telkens opnieuw ge-update worden. Daarom wordt de variabele actieveSterren weer opgehoogd.