Hvordan å inkludere bilder på websiden din med HTML5 Canvas - dummies

Mens HTML lenge har støttet bilder, gir lærredsgrensesnittet til HTML5 nytt liv til webbilder. Bilder kan vises i et lerret, hvor de kan integreres med vektor tegning teknikkene i lerret API. Du kan også velge en del av et bilde som skal vises, og bruke ulike transformasjoner til bildet ditt for å lage interessante komposisjoner og animasjoner.

Denne figuren viser et bilde tegnet to ganger på et lerretelement.

Tegne et bilde på HTML5-lerretet

Den enkleste måten å bruke et bilde i et lerretelement på, er å bruke et bilde som allerede er tilgjengelig på nettsiden. Du kan sette et bilde på siden med den vanlige

-taggen og bruke CSS-skjermen: ingen regel for å gjøre bildet usynlig. En alternativ tilnærming er å opprette et bildeobjekt i JavaScript og bruke src-attributtet til å koble det bildet til en bestemt bildefil. For eksempler på begge teknikker, vurder følgende HTML-kode:

Kan ikke støttes

Følgende JavaScript-kode viser bildet i lerretet:

funksjonstegn () {var drawing = document. getElementById ("drawing"); var con = tegning. getContext ("2D"); var goofyPic = dokument. getElementById ("goofyPic"); lure. drawImage (goofyPic, 0, 0, 50, 50); var image2 = nytt bilde (); image2. src = "andyGoofy. gif"; lure. drawImage (image2, 100, 100, 70, 50);} // endelige tegning

Slik gjør du det:

1. Lag bildet på hovedsiden.

   Den enkleste måten å få tilgang til et bilde på, er å bruke vanlig HTML for å legge inn bildet på hovedsiden. Hvis du vil, kan du skjule

   -taggen med CSS-kode (display: none) slik at kun versjonen i lerretet er synlig.

2. Lag en JavaScript-variabel for bildet med dokumentet. getElementByID () mekanisme.

3. Tegn bildet på lerretet med funksjonen drawImage () .

   Den første av de fem parameterne er navnet på et bildeobjekt. (Det må være navnet på et JavaScript-bildeobjekt, ikke bare filnavnet på et bilde.) De to neste parametrene er X- og Y-verdiene i øverste venstre hjørne av bildet, og de to siste parameterne er størrelsen av bildet (bredde og høyde).

4. Lag et JavaScript Bilde objekt.

   Hvis du ikke vil legge inn et bilde på siden, kan du bruke JavaScript til å lage et bilde dynamisk. Bruk den nye Image () -konstruktøren til å bygge et nytt bilde.

5. Endre bildens src -egenskap.

   Hvis du oppretter et JavaScript-bilde, må du angi src-attributtet for å indikere filen som er tilknyttet bildet.Det kan ta litt tid før bildet lastes inn.

Bildet vises ikke før det er lastet fra serveren. I de fleste tilfeller vil dette ikke være et problem, men noen ganger må du forsinke programmet til bildet er fullført. Bildobjektet har en onload-egenskap som godtar tilbakeringingsfunksjonen. Bruk denne teknikken til å vente til tegningen er ferdig:

bildet. onload = finishTrawing; funksjon finishTrawing () {// resten av tegningskoden går her}

Tegne del av et bilde på HTML5-lerretet

Noen ganger vil du tegne en liten del av det opprinnelige bildet. Et program som fokuserer på midt på det stumme ansiktet ser slik ut:

Det er ganske enkelt å tegne en del av et bilde. Bruk samme drawImage () -kommandoen, men denne gangen bruker du en versjon med ni parametere:

con. drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150);

Her er hva alle disse parameterne betyr:

• Bilde navn: Den første parameteren er bildeobjektet (ikke filnavnet, men navnet på JavaScript Image-objektet).

• Øverst til venstre på kilden: Den første jobben er å velge den delen av det opprinnelige bildet som skal vises. De to neste parameterne angir det øverste venstre hjørnet av et valg på det opprinnelige bildet. (Du kan bruke en bildeditor som Gimp eller IrfanView til å bestemme valgposisjon og -størrelse.)

• Kildens høyde og bredde: De to neste parameterne angir høyden og bredden på kildevalget.

• Bestemmelsessted: De to neste parameterne er posisjonen til bildet øverst til venstre på lerretet.

• Målestørrelse: De to siste parameterne beskriver høyden og bredden på målbildet på lerretet.

Underbildeteknikken beskrevet her er ganske nyttig fordi den lar deg kombinere flere bilder til et enkelt bilde (noen ganger kalt et sprite-ark). Dette reduserer overhead for å levere bildet. (Ett stort bilde er raskere å levere enn flere små.) Det brukes også ofte i spill og animasjoner der en enhet kan ha flere bilder som vises i rekkefølge for å foreslå å gå eller angripe.