Innehållsförteckning:
Video: 10 Cheap DIY Home Decor ideas 2024
Medan HTML länge har stöd för bilder, kan du skapa ett nytt liv på webbbilder på kanvasgränssnittet i HTML5. Bilder kan visas inuti en duk, där de kan integreras med vektorritningstekniken i kanvas API. Du kan också välja en del av en bild som ska visas och tillämpa olika omvandlingar till din bild för att skapa intressanta kompositioner och animeringar.
Denna figur visar en bild ritad två gånger på ett dukelement.
Ritning av en bild på HTML5-kanalen
Det enklaste sättet att använda en bild i ett dukelement är att använda en bild som redan är tillgänglig på webbsidan. Du kan lägga en bild på sidan med den vanliga
Kan inte stödjas
Följande JavaScript-kod visar bilden i duken:
funktionsteckning () {var drawing = document. getElementById ("dragning"); var con = ritning. getContext ("2d"); var goofyPic = dokument. getElementById ("goofyPic"); lura. drawImage (goofyPic, 0, 0, 50, 50); var image2 = ny bild (); image2. src = "andyGoofy. gif"; lura. drawImage (bild2, 100, 100, 70, 50);} // slut rita
Så här gör du:
-
Skapa bilden på huvudsidan.
Det enklaste sättet att komma åt en bild är att använda vanlig HTML för att bädda in bilden på huvudsidan. Om du vill kan du gömma taggen
med CSS-kod (display: none) så att endast versionen i duken är synlig. -
Skapa en JavaScript-variabel för bilden med dokumentet. getElementByID () mekanism.
-
Rita bilden på duken med funktionen drawImage () .
Den första av de fem parametrarna är namnet på ett bildobjekt. (Det måste vara namnet på ett JavaScript-bildobjekt, inte bara filnamnet på en bild.) De två följande parametrarna är X- och Y-värdena till det övre vänstra hörnet av bilden och de två sista parametrarna är storleken av bilden (bredd och höjd).
-
Skapa ett JavaScript Bild objekt.
Om du inte vill bädda in en bild på sidan kan du använda JavaScript för att skapa en bild dynamiskt. Använd den nya Image () konstruktören för att skapa en ny bild.
-
Ändra bildens src egenskap.
Om du skapar en JavaScript-bild måste du ange src-attributet för att ange filen som är associerad med bilden.Det kan ta lite tid innan bilden laddas.
Bilden visas inte 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 är klar. Bildobjektet har en onload-egenskap som accepterar en återuppringningsfunktion. Använd den här tekniken för att vänta tills din ritning är klar:
bild. onload = finishDrawing; funktion finishTrawing () {// resten av ritningskoden går här}
Ritning del av en bild på HTML5-kanalen
Ibland vill du rita en liten del av originalbilden. Ett program som fokuserar på mitt i det fåniga ansiktet ser så här ut:
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 du 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 bildobjektet (inte filnamnet, men namnet på JavaScript Image-objektet).
-
Övre vänstra hörn av källa: Det första jobbet är att välja den del av originalbilden som ska visas. De två följande parametrarna anger det övre vänstra hörnet av ett urval på originalbilden. (Du kan använda en bildredigerare som Gimp eller IrfanView för att bestämma urvalspositionen och storleken.)
-
Källaens längd och bredd: De två följande parametrarna anger höjden och bredden av källvalet.
-
Destinationsposition: De två följande parametrarna är positionen för bildens övre vänstra hörn på duken.
-
Bestämningens storlek: De två sista parametrarna beskriver höjd och bredd på målbilden på duken.
Den underliggande tekniken som beskrivs här är ganska användbar eftersom den låter dig kombinera flera bilder i en enda bild (ibland kallad sprite sheet). Detta minskar omkostnaden för att leverera bilden. (En stor bild är snabbare att leverera än flera små.) Den används också ofta i spel och animeringar där en enhet kan ha flera bilder som visas i följd för att föreslå att gå eller attackera.
