Útmutató HTML5 Canvas
Canvas az egyik jellemzője, hogy a legtöbb webes fejlesztők szeretnék használni a fejlesztési egy igazán gazdag web-alapú alkalmazások, anélkül, hogy a böngészőt, hogy telepíteni további alkalmazásokat.
Vászon webes alkalmazásokhoz
HTML5 Canvas elem
... felbontás függ a raszter a vásznon, amelyet fel lehet használni a render grafika, játék grafikus és egyéb vizuális képeket.
Tehát hogyan helyezze a dokumentumot vászon HTML? Nagyon egyszerű:
Ez a kód nem az, amit nem mutat a böngésző, mert a vászon üres. Adjuk hozzá a határon, így láthatja azt.
A weblapon felveheti több elem vásznon. Az egyetlen követelmény az lenne, hogy minden vászon egy id, a másik oldalon ugyanaz lesz a vásznon. Ahhoz, hogy jelennek meg az oldalon, vászon, akkor olvassa el a vászonra keretében. Context hozzáférést biztosít 2D tulajdonságok és módszerek, amelyek lehetővé teszik, hogy dolgozzon, és manipulálni a képeket a vásznon. Körülbelül keretében később.
Minden grafikai elem x és y koordinátákat.
x - horizontális koordinátáit
y - a függőleges koordináta
A különbség az SVG és Canvas
- Vászon gyorsabb, ha a rajz összetett grafikák
- Mentheti a képet a vászonra, SVG belőle nem fog működni.
- Felülvizsgálata vászon tagjai pixel.
Íme az előnyei SVG.
- SVG nem függ a felbontás, akkor lehet méretezni a különböző képernyőfelbontás. Példa.
- SVG - XML, és a különböző elemek.
- SVG jó használni, ha komplex animációk.
És miért nem használja az egyiket a másikkal? Ha a weboldal nem függ a felbontás, majd válassza ki a SVG. Ha valaki egy játék, és szeretné, hogy a grafika nagyon gyorsan, vagy nem akar foglalkozni XML, majd válassza vászon. Az interneten, együtt dolgoznak, és kiegészítik egymást. Példa.
Vászon és a hardveres gyorsítást
A korábbi verziók a böngésző, grafikus renderelés - mint a legtöbb erőforrás-igényes feladat - került a CPU-t. Modern böngésző már felújították ezen a területen, átvitelével grafikai igényű feladatokat a GPU, GPU grafikus használ Direct2D és DirectWrite. Amely felgyorsítja feldolgozását grafika és enyhíti a terheket a központi feldolgozó egység (CPU). példa
Canvas 2D API
vászon 2D API olyan objektum, amely lehetővé teszi, hogy dolgozzon, és manipulálni képek és grafikák a canvas elem. Utalni a vászon összefüggésben használjuk getContext módszer. amely egy olyan eleme, vászon. Meg van egy paraméter, amely jelenleg 2nd. Itt van egy kódrészletet referencia keretében.
Minden vászon saját kontextusában, tehát ha az oldal több elemet tartalmaznak Canvas van, hogy linkeket minden kontextusban.
Ezen kívül getContext, sok más funkció a vásznon 2D API-t. A legismertebb ezek közül az alábbiakban felsorolt.
- skála - teszi lehetővé a jelenlegi helyzetben.
- forgatni - ez lehetővé teszi, hogy forgassa az x és y koordinátái a jelenlegi helyzetben.
- menteni - elmenti a jelenlegi állapotában a kontextusban.
- helyreállítása - ez lehetővé teszi, hogy visszaállítsa az összefüggésben állam egy korábban mentett állapot.
- font - Gets vagy beállítja a betűtípus a kontextusban.
- fillText - írja a szöveget, hogy a jelenlegi vásznon.
- MeasureText - méri az aktuális szélességét a megadott szöveget.
Ez nem az összes módszer kapcsolódik a Canvas 2D API-t.
Formák és színek Vászon
téglalap vászon
Van egy egész csoport tulajdonságai és funkciói alakzatrajzoló. Kezdjük egy téglalapot. Itt vannak a vonatkozó funkció elérhető felhívni téglalapok.
- FillRect (x, y, W, H) - egy téglalapot rajzol a vásznon, az aktuális kitöltési stílust
- strokeRect (x, y, W, H) - dobozt rajzol, amely leírja a téglalapot a vásznon, az aktuális vonal stílusa
- clearRect (x, y, W, H) - törli az összes pixel a vásznon, téglalap válik átlátszó fekete
Ahhoz, hogy rajzoljon egy téglalapot, a legegyszerűbb módja az, hogy FillRect. Ez egy téglalapot rajzol a vásznon az aktuális fillStyle. Itt van, hogyan lehet létrehozni egy fekete téglalap.
Ez a kód megjelenik egy fekete téglalap, a felső 5 pixel jobbra 5 pixel és 145 pixel szélesség és magasság.
Ha nem adja meg a színt, az alapértelmezett szín mindig fekete. Felhívni a másik téglalap, hívja FillRect különböző paraméterekkel. FillStyle bármilyen színű lehet, így lehet kihasználni opálossági összeegyeztethető CSS3. A következő kód húz három téglalap a vásznon, különböző színekben, áttetsző szomszéd.
Rajz körök vászon
Felhívni egy körhöz (kör), jobban használják ki az ívet. Doug vászon egy kört rajzol az aktuális fillStyle. Funkció alább.
- ív (. x y sugár startAngle endAngle az óramutató járásával ellentétes ...) - arc teszi egy kör végétől kezdve a kezdő szög és a végén a végén az utolsó szöget.
Itt van, hogyan lehet létrehozni egy fekete kör a vásznon.
Fekete Kör vászon
Ahhoz, hogy rajzoljon egy kört áramköri használata helyett strokeStyle fillStyle. Ezután töltés helyett a stroke hívást.
A kör nem lehet 360 fok. Változtatni az alakját, változtassa meg a kezdő és záró tartományban.
Bezier görbék
Egy bonyolultabb minta Bezier-görbét. Ez nehéz feladat lehet elérni viszonylag egyszerűen bezierCurveTo funkciót. Ez a funkció jelzi az aktuális alkönyvtárban kontroll pontokat jelentenek Bezier görbét. bezierCurveTo alábbi paraméterek.
- bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) - hozzáad egy adott pontján a jelenlegi úton csatlakozik az előző Bezier görbe adatok töréspontok.
Bezier görbe tartalmaznia kell a három pontot. Az első két pont a kontroll számítások, a harmadik, az utolsó pont a görbe. Itt van, amit akkor létrehozhat egy Bezier görbét.
Rajz Bezier görbéket
A Bezier görbék egy csomó dolgot meg lehet hívni. Itt egy példa a komplex rajz egy mosolygó arc a vásznon.
A háttér színe vászon
A vászon lehet vegyes színű vagy töltse egy egyszínű vagy akár egy gradiens mintát. Régebben fillStyle elsősorban az előző példákban. Ez a funkció kitölti a háttér színe és összefüggésben lehet egy változatos színekben. A következő példa a háttér színe szivárvány hatás.
Ha nincs szüksége egy egyszínű, akkor strokeStyle strokeRect és rajzoljuk körbe egy téglalap. Másik jellemzője vászon adja azt a lehetőséget, hogy hozzon létre színátmenetek. A funkciókat az ezekhez az alábbiakban közöljük.
- addColorStop (ofszet, szín) - növeli színt leáll értékeit 0,0 elmozdulása egyik végén a gradiens, 1,0 elmozdulás ellenkező végén
- createLinearGradient (x0, y0, x1, y1) - CanvasGradient visszaadja egy objektum, amely egy lineáris gradiens festék vonal mentén határozza koordinátákat
- createRadialGradient (x0, y0, z0, x1, y1, R1) - visszaadja az objektum CanvasGradient amely egy radiális gradienst, kúp színezék által képviselt koordinátákat, így a következő
Lineáris gradiens hozható létre hívja createLinearGradient. Ahhoz, hogy hozzá egy színátmenet a hívni kívánt addColorStop. Calling ez növeli a megadott x és y színkoordináták. A következő példa azt mutatja, egy egyszerű lineáris gradiens.
Line és árnyék a szöveget a vásznon
Van módja vászon, akkor ki kell töltenie. Íme néhány a jellemzők és funkciók vonalakat.
- vonalszélesség [= érték] - visszaadja az aktuális vonalvastagság. Szerelvény változó vonalvastagság.
- LineCap [= érték] - visszaadja a jelenlegi vonal stílusa áramkört. Azt be lehet állítani, hogy változtatni a stílusát a kontúr. A kontúrok a vonal lehet lekerekített és egyenes.
- LineJoin [= érték] - visszaadja a jelenlegi vonal stílusa.
Ahhoz, hogy rajzoljon egy vonalat írsz funkció MoveTo és LineTo. Ezek a funkciók veszi a x és y koordinátáit, hogy megmondja, hogy pontosan hová szeretnénk felhívni a vonalat. Azt is megadhatja, szélessége vonalak segítségével vonalszélesség. Miután megadott egy string, fel kell hívnia a stroke, hogy rajzoljon egy vonalat.
A következő példa bemutatja, hogyan kell felhívni a sorokat, kezdve és befejezve a magas vékony.
Ahhoz, hogy hozzá stílust egy sort, meg lehet változtatni a kontúr beállítást LineCap. Bármi legyen is a lekerekített élek, meg kell alkalmazni összefüggésben érték LineCap kerek (kör).
Lekerekített vonalak Canvas
A szöveg a vásznon
A szöveg olyan egyszerű, hogy felhívja a canvas elem a sorban. Néhány fontos jellemzők és funkciók rajz szöveg:
- font [= érték] - visszaadja az aktuális betűtípus-beállításokat. A szintaxis ugyanaz, mint a CSS tulajdonságok
- textAlign [= érték] - visszaadja a lehetőségek igazoló szöveget. Lehetséges értékei: tábla, balra, jobbra és középre
- TextBaseline [= érték] - visszaadja az aktuális beállításokat a sor igazítását. Lehet állítani, hogy módosítsa a nyomvonal a fő útmutató
- fillText (szöveg, x, y [, maxwidth]) - kitölti a szöveg ebben a helyzetben
- strokeText (szöveg, x, y [, maxwidth]) - a szöveg érinti ezt pozícióban
Nyomtatni kívánt szöveget használni vászonra fillText módszer. Én meg a betűméretet, és írja a betűtípus-beállításokat.
Ahhoz, hogy a szöveg tiszta, beállítva fillStyle.
Hozzáadása hatására árnyékban vászon szöveget. Ez segít nekünk shadowOffsetX.
Shade lehet beállítani, hogy bármilyen szögben a színe az árnyék, ahogy tetszik.
Ez a kód rajzol egy birka a vásznon.
A fényképek Most forgatni, flip, elszíneződik.
Átalakítás és animációs
Íme néhány a jellemzők és funkciók elvégzésére konverziót.
- skála (x, y) - változó transzformációs mátrix a skála transzformáció alkalmazásával meghatározott jellemzők
- forgatni (szög) - módosítja a konverziós mátrixot, hogy alkalmazni egy rotációs transzformáció megadott
- lefordítani (x, y) - a változó transzformációs mátrix alkalmazott átvinni kívánt jellemzőket konverziós
- transzformáció (M11, M12, M21, M22, dx, dy) - változó transzformációs mátrix alkalmazva a mátrix érv c
- setTransform (M11, M12, M21, M22, dx, dy) - változó transzformációs mátrix, hogy a mátrix érv.
Átalakítás és animáció külön működik, de ha kombinálják őket, mint alább, lehet, hogy egy erős vizuális hatást. Kezdjük a forgatás povernom és forogni fog keretében a vásznon. A következő példa téglalapot rajzol minden 250 milliszekundum, és minden téglalap el van forgatva, a hatás a forgó kerék. Szín randomizált, hogy készítsen egy ragyogó hatást.
Scale elemek vászon, könnyen. Mi lesz betartani az előző kód, kivéve vraschayuscheniya mi skála minden téglalap másodpercenként. Itt a kód.
Az összetett animáció, nézd meg a világos vonal, amely létrehozta a W3C-csoportot. További információk a transzformációk vászonra, itt.
Munka az egeret a vásznon
Valószínűleg kitalálta, a munka az egérrel a vásznon, mint lehetséges. Mint minden weboldal elemet, akkor vissza az x és y koordinátái az egér és módszerek pageX pageY.
Követni az egér kurzort a vásznon, itt van egy kódrészletet.
A fenti példában, csatolt esemény rögzítés az egér mozgását, így amikor a kurzor, az x és y koordináták jelennek meg a weblapon. Nehezebb, hogy a vásznon, mint egy papírlap, amelyre rajzolni.
következtetés
Ez nem sok, hogy nem a teljes rekordot a leckét, vegye figyelembe, hogy ezek a szokatlan hatás működik teljesen modern böngészőben. Küldje el nekünk a vázlatok, lehet, hogy megteszi az első helyen az oldalunkon.