Hvordan bruke Canvas Tag i din HTML5 spill

April 8  by Eliza

Den simpleGame motorens Scene objekt bruker en av de mest spennende nye funksjonene i HTML5 -. Lerretet tag Denne spennende flagget tillater deg å tegne bilder og andre elementer direkte på en del av nettleseren.

En kort titt på et spill lerret

Her er en grunnleggende side som viser et lerret med to rektangler og et bilde.

Hvordan bruke Canvas Tag i din HTML5 spill


<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> </ title>
<Meta charset = "UTF-8" />
<Style type = "text / css">
</ Style>
<Script type = "text / javascript">
funksjon draw () {
Var lerret = document.getElementById ("overflaten");
Var imgBall = new Image ();
imgBall.src = "redBall.png";
if (canvas.getContext) {
Var con = canvas.getContext ('2d');
con.fillStyle = "rgb (255, 255, 0)";
con.fillRect (40, 140, 150, 50);
con.drawImage (imgBall, 100, 100, 50, 50);
} // End if
} // End uavgjort
</ Script>
</ Head>
<Body onload = "tegne ()">
<H1> Basic Canvas Demo </ h1>
<Lerret id = "overflaten"
width = "200"
height = "200">
<P> Nettleseren din støtter ikke lerretet tag ... </ p>
</ Lerret>
</ Body>
</ Html>

Grunnleggende lerret tegning for spillet ditt

Lerretet tag er en HTML-kode, men det er i hovedsak brukt som en plassholder i HTML. Lerretet tag har en sammenheng attributt, som lar programmereren å tegne grafikk direkte på siden. Her er hvordan dette eksempelet fungerer:

  1. Legg et lerret tag til HTML.

    Normalt skal du lage et lerret tag i HTML, men simpleGame bibliotek legger automatisk til et lerret tag og føyer det til slutten av siden kroppen.

  2. Lag en funksjon for tegning.

    I dette eksempel blir lerretet trukket i en funksjon som kalles når sideinnledning laster. I simpleGame, vil tegnefunksjonen bli kalt 20 ganger per sekund.

  3. Få en tegning sammenheng.

    Lerretet tag støtter en 2D tegning kontekst (ja, 3D kommer, men det er ennå ikke allment støttes). Bruk getContext () Fremgangsmåte for å gjøre en referanse til tegningen sammenheng.

  4. Lag en Javascript-bildeobjekt.

    Sprite objekter i simpleGame bibliotek er basert på Javascript-bilder. Begynn med å lage et bildeobjekt i Javascript.

  5. Still bildets kilde attributt.

    Lenke filer til bildeobjektet, sett src eiendom bildeobjektet til en bildefil i samme katalog som programmet. Dette vil knytte et bilde med dokumentet, men bildet vil ikke bli trukket på siden; i stedet, det er lagret i minnet som skal brukes i kode.

  6. Still fyll stil.

    Du kan tegne fylte og åpne tegninger med lerretet tag. Den fillStyle kan settes til farger samt mønstre og graderinger.

  7. Lag rektangler.

    Du kan tegne et åpent rektangel med strokeRect () metode og en solid rektangel med fillRect () -metoden. I simpleGame bibliotek, trekker Scene objektets klart () metoden bare et fylt rektangel i scene bakgrunnsfarge.

  8. Tegne bildet i lerretet.

    Bruk drawImage () metode for å tegne et bilde inne i et lerret. Det finnes mange varianter av denne metoden, men den som brukes i simpleGame angir bildets posisjon og størrelse.