Hur Inkludera bilder på din webbsida med HTML5 Canvas

April 24

Medan HTML har länge haft stöd för bilder, lägger duken gränssnittet i HTML5 nytt liv till webbbilder. Bilder kan visas inuti en duk, där de kan integreras med den vektor ritning tekniker för duken API. Du kan också välja en del av en bild att visa, och använda olika transformationer i bilden för att skapa intressanta kompositioner och animationer.

Denna figur visar en bild tas två gånger på en duk inslag.

Hur Inkludera bilder på din webbsida med HTML5 Canvas

Ritning av en bild på HTML5 duk

Det enklaste sättet att använda en bild i en duk inslag är att använda en bild som redan finns på webbsidan. Du kan sätta en bild på sidan med det ordinarie <img> taggen och använda CSS display: none regeln för att göra bilden osynlig. En alternativ metod är att skapa ett bildobjekt i JavaScript och tillämpa attributet src för att ansluta den bilden till en viss bildfil. För exempel på båda teknikerna, överväga följande HTML-kod:

<Img class = "hidden"
id = "goofyPic"
src = "andyGoofy.gif"
alt = "Fånig bild på mig" />
<Canvas id = "rita"
height = "400"
width = "400">
<P> Canvas stöds inte </ p>
</ Canvas>

Följande JavaScript-kod visar bilden i duken:

Funktionen draw () {
var ritning = document.getElementById ("ritning");
var con = drawing.getContext ("2d");
var goofyPic = document.getElementById ("goofyPic");
con.drawImage (goofyPic, 0, 0, 50, 50);
var image2 = new Image ();
image2.src = "andyGoofy.gif";
con.drawImage (image2, 100, 100, 70, 50);
} // End draw

Här är hur man gör det:

  1. Skapa bilden i huvudsidan.

    Det enklaste sättet att komma åt en bild är att använda vanliga HTML för att bädda in bilden i huvudsidan. Om du vill kan du dölja <img> taggen med CSS-kod (display: none), så att endast den versionen i duken syns.
  2. Skapa en JavaScript-variabel för bilden med document.getElementById () mekanism.
  3. Rita bilden på duken med drawimage () funktionen.

    Den första av de fem parametrarna är namnet på ett bildobjekt. (Det måste vara namnet på en JavaScript bildobjekt, inte bara namnet på en bildfil.) De nästa två parametrarna är X- och Y-värdena för det övre vänstra hörnet av bilden, och de två sista parametrarna är storleken av bilden (bredd och höjd).
  4. Skapa en JavaScript Image objekt.

    Om du inte vill bädda in en bild i sidan, kan du använda JavaScript för att skapa en bild dynamiskt. Använd det nya Image () för att bygga en ny bild.
  5. Ändra bildens src egendom.

    Om du skapar ett JavaScript bild måste du ange attributet src för att ange filen i samband med bilden. Det kan ta lite tid för bilden att ladda.

Bilden kommer inte att visas förrän den har laddats från servern. I de flesta fall kommer detta inte vara ett problem, men ibland måste du fördröja ditt program tills bilden har lästs in. Bildobjektet har en onload egenskap som accepterar en callback-funktion. Använd den här tekniken för att vänta tills dina ritnings utföranden:

image.onload = finishDrawing;
Funktionen finishDrawing () {
// Resten av ritningskoden går här
}

Ritning del av en bild på HTML5 duk

Ibland vill man dra en liten del av den ursprungliga bilden. Ett program som fokuserar på den mitt på långbent ansikte ser ut så här:

Hur Inkludera bilder på din webbsida med HTML5 Canvas

Det är ganska lätt att dra en del av en bild. Använd samma drawimage () kommandot, men den här gången använder en version med nio parametrar:

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

Här är vad alla dessa parametrar betyder:

  • Bildnamn: Den första parametern är bildobjekt (inte filnamnet, men namnet på JavaScript Bildobjektet).
  • Övre vänstra hörnet av källa: Den första jobb är att välja den del av den ursprungliga bilden ska visas. De nästa två parametrarna indikerar det övre vänstra hörnet av ett urval på den ursprungliga bilden. (Du kan använda ett bildredigeringsprogram som Gimp eller Irfan att fastställa valet position och storlek.)
  • Höjd och bredd på källa: De kommande två parametrarna indikerar höjden och bredden av urvalskälla.
  • Position för destination: De nästa två parametrarna är positionen för bildens övre vänstra hörnet på duken.
  • Storlek destinations: De två sista parametrarna beskriver höjden och bredden av målbilden på duken.

Den delbild teknik som beskrivs här är ganska användbart eftersom det tillåter dig att kombinera flera bilder till en enda bild (kallas ibland en sprite ark). Detta minskar overhead för att leverera bilden. (En stor bild är snabbare att leverera än flera små.) Det är också ofta används i spel och animationer där en enhet kan ha flera bilder som visas i sekvens för att föreslå promenader eller attackera.