Sådan bruges Canvas tag i din HTML5 spil

Den simpleGame motorens Scene objekt bruger et af de mest spændende nye funktioner i HTML5 -. Lærredet tag Dette spændende tag kan du tegne billeder og andre elementer direkte på en del af browseren.

Et hurtigt blik på et spil lærred

Her er en grundlæggende side viser et lærred med to rektangler og et billede.

Sådan bruges Canvas tag i din HTML5 spil

<! DOCTYPE HTML>
<Html lang = "da">
<Head>
<Title> </ title>
<Meta charset = "UTF-8" />
<Style type = "text / css">
</ Style>
<Script type = "text / javascript">
funktion draw () {
var lærred = document.getElementById ("overflade");
var imgBall = nyt Image ();
imgBall.src = "redBall.png";
Hvis (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
} // Ende uafgjort
</ Script>
</ Head>
<Body onload = "trække ()">
<H1> Basic Canvas Demo </ h1>
<Canvas id = "overflade"
width = "200"
height = "200">
<P> Din browser understøtter ikke lærred tag ... </ p>
</ Canvas>
</ Body>
</ Html>

Grundlæggende lærred tegning til dit spil

Lærredet tag er et HTML-tag, men det er først og fremmest bruges som en pladsholder i HTML. Lærredet tag har en sammenhæng attribut, som gør det muligt for programmøren at trække grafik direkte på siden. Det er sådan her dette eksempel virker:

  1. Tilføj et lærred tag til HTML.

    Normalt skal du oprette et lærred tag i HTML, men det simpleGame biblioteket tilføjer automatisk et lærred tag og føjer det til slutningen af ​​siden krop.
  2. Opret en funktion til tegning.

    I dette eksempel er lærredet tegnet i en funktion kaldet når siden oprindeligt belastninger. I simpleGame vil tegningen funktion kaldes 20 gange i sekundet.
  3. Få en tegning kontekst.

    Lærredet tag understøtter en 2D tegning kontekst (Ja, 3D er på vej, men det er endnu ikke bredt understøttet). Brug getContext () metode til at gøre en henvisning til tegningen kontekst.
  4. Opret en JavaScript-billede Object.

    Sprite objekter i simpleGame biblioteket er baseret på JavaScript billeder. Begynd ved at oprette et billede objekt i JavaScript.
  5. Indstil billedets source attribut.

    For at linke en fil til Image objekt, sæt src ejendom billede objekt til en billedfil i den samme mappe som dit program. Dette vil knytte et billede med dit dokument, men billedet vil ikke blive trukket på siden; stedet, det opbevares i hukommelsen, der skal anvendes i koden.
  6. Indstil fyld stil.

    Du kan tegne fyldte og åbne tegninger med lærred tag. Den fillStyle kan indstilles til farver samt mønstre og gradienter.
  7. Opret rektangler.

    Du kan tegne en åben rektangel med strokeRect () metode og en solid rektangel med fillRect () metode. I simpleGame biblioteket, Scene objektets klar () metode trækker simpelthen en udfyldt rektangel i scenen baggrundsfarve.
  8. Tegn billedet i lærredet.

    Brug drawImage () metode til at tegne et billede inde i et lærred. Der er mange variationer af denne metode, men den, der anvendes i simpleGame angiver billedets position og størrelse.

© 2019 Zajacperrone.com | Contact us: webmaster# zajacperrone.com