‘canvas tutorial’ címkét tartalmazó cikkek
Az előzőekben megnéztük hogyan tudunk a HTML5 Canvas-ra rajzolni, képet elhelyezni, most nézzük meg, hogy miként tudunk animációkat készíteni rá. A példákban egy SlideShow, majd azt követően egy sin-cos függvény kirajzolását és egy banner szöveg úsztatását fogjuk megnézni. A példákat mindenhol kommentekkel láttam el, ahol fontosnak ítéltem. Remélem, hogy érthetőek lesznek.
Talán kezdjük egy viszonylag egyszerű Slideshow animáció elkészítésével. A képeket egy 600×600-as canvas-ba fogom beletenni és egy kis áttűnés effektet is hozzáadunk a mókához. A példa lelke a képeket cserélő Swithimage(); függvény. A képeket előre definiáltan megadjuk, hogy melyek legyenek, amik cserélődnek és bele tesszük egy imagepaths tömbbe. A setinterval(); függvény segítségével pedig váltogatjuk őket, majd a revealimage(); segítségével pedig kirajzoljuk az aktuálisan következő képet.
SlideShow
Lássuk a kódot: Tovább olvasom »
Ebben a részben a képek manipulálására, megjelenítésére fogjuk használni a HTML5 canvas újításait.
Mielőtt belevágnánk, nézzük meg, hogy milyen módszereket választhatunk egy kép kirajzolására. Igazából a drawImage(img, x,y) paraméterezésének különböző módozatai miatt van lehetőség más és más kirajzolási módokat választanunk.
Az első esetben egyszerű dolgunk van, fogjuk a drawImage(img,x,y) megfelelő paraméterezését – ahol x,y a kép bal felső sarkának koordinátái.
Lássuk, hogy inicializálunk és töltünk egy képet ebben az esetben a rajzvászonra. Ez némi plusz magyarázatra szorul. Először is, létre kell hoznunk egy img – kép element-et (var img=new Image();). Majd az img.onload =function(){ ide jön a végrehajtás rész, esetünkben a drawImage(img,x,y)} inicializáljuk. Lássuk egy egyszerű példán, hogy ez hogyan is néz ki.