‘canvas image tutorial’ címkét tartalmazó cikkek
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.