En Tutorial for HTML 5 Canvas Animasjon
En av de mer spennende syntaktiske funksjoner utgitt med HTML5 er "<canvas>" element. Den <canvas> element skaper en tegning overflate. På mange måter er det programmererens tilsvarende malerens lerret, og gir en blank rektangel på en webside som kan skaleres til alle størrelser. Java deretter fungerer som maling, slik at du kan tegne eller animere noe på lerretet. Den mest utfordrende delen av å lage en HTML5 lerret animasjon er ikke å forstå <canvas> element i seg selv, men å vite hvordan å "male" Javascript-animasjoner på toppen av det.
Bruksanvisning
1 Åpne et nytt tomt dokument og tittel det "lerret-animation.html." Åpning nye dokumentet i en web-utvikling-programmet kan gjøre redigeringen enklere, men hvis du ikke har en bare bruke en vanlig tekstredigeringsprogram.
2 Skriv inn koden for å definere din HTML5 dokumentet, inkludert doctype, hode og kropp av dokumentet. Som i følgende eksempel angi tegnsettet og tittelen på dokumentet hodet:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
</ Body>
</ Html>.
3 Legg til <seksjon> og <canvas> koder til kroppen av dokumentet. Seksjonen tag er nytt i HTML5. Den definerer seksjoner i en Web-dokument. Lerretet tag definerer den rektangulære lerret du vil bruke til å bygge Javascript animasjon. Følgende eksempel har ID "animasjon", som vil bli brukt som en referanse av Javascript:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
<section>
<canvas id="animation"></canvas>
</section>
</ Body>
</ Html>.
4 Still inn bredden og høyden på lerretet og fylle den med tekst som skal vises på nettlesere som ikke støtter HTML5. Lerretet kan settes til alle størrelser, avhengig av dine behov. Husk imidlertid at større lerreter ta lengre tid å laste. Her er et eksempel:
<! DOCTYPE html>
<Html>
<Head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Animation</title>
</ Head>
<Body>
<section>
<canvas id="animation" width="500" height="500">
Sorry, your browser doesn't not support HTML5 and, in turn, cannot load this animation.
</canvas>
</section>
</ Body>
</ Html>.
5 "Paint" Javascript animasjon på <canvas> element ved hjelp av "getElementById ()" metoden for å koble skriptene til lerretet ' "animasjon" ID. Hvis du ikke har tidligere erfaring å skrive Javascript animasjoner, finnes det en rekke eksempler du kan prøve er gitt i Resources i denne artikkelen.
Hint
- En grunnleggende forståelse av Javascript animasjon er nødvendig for å bygge HTML5 lerret animasjoner. Hvis du ikke har dette, kan du se "Ressurser" for eksempler.