Hogyan működik a kód példák HTML5 canvas sorsolás
Felkészülés festés
Meg kell kezdeni, akkor létre kell hozni a vásznon is, valamint a hozzá tartozó forgatókönyvet.
Mi határozza meg a méretet, a vászon, valamint egy azonosító. Erre azért van szükség annak érdekében, hogy megkösse a vászonra egy script, hogy majd mi most:
Van írva a változó területen ezt a sort, ez segít felhívni belül a vászonra különböző módszerekkel. Tehát most tudunk lépni, hogy megpróbálja felhívni. Az egyszerűség kedvéért, azt, hogy a háttérben a vászon sárga helyett fehér, így pontosan láthatók a szivacs.
1. példa - kitöltetlen téglalap
Most már van egy változó területen, és különféle módszereit akkor felhívni belül a vásznon tartályba. Az első sor szélessége állítható, valamint a szín, ez történik a következő sorokat:
field.lineWidth = 4;
field.strokeStyle = '# 173045';
Kiváló, a paraméterek beállítása. Most az a fontos, hogy megértsük, hogy a festmény folyik. Ez történik a következő elvet: van az x-koordináta. kezdődik elején a vásznon, és jobbra mozog, és az a koordináta y. ez is kezd a tartály első, de megy le. Hogy rájött, hogy jobb, hogy ezt a képet:
És mi történik téglalapot rajzol? Először is, mindig állítsa a ellensúlyozta a koordináta x. majd Y tekintetében. Miután a hozzárendelés a kezdeti helyzetben csak be kell adni a szélessége és magassága a téglalap. Először is, a szélességét, majd - magasság. Vegyünk egy pillantást:
field.strokeRect (80, 90, 120, 70);
eredmény:
Itt az első paraméter a zárójelben ellensúlyozza x, a második - az offset y, a harmadik - a szélessége a negyedik - a magasságot. Mindez elég ahhoz, hogy ne felejtse el felhívni téglalapok.
2. példa - kitöltött téglalapot
Készült az esetben minden ugyanúgy, a változó csak az a módszer neve is:
field.fillStyle = '# 173045';
field.fillRect (50, 50, 130, 85);
fillStyle meghatározására szolgáló módszer a színe a kitöltés. Kiszedtem az utolsó, amíg a téglalap, az új is az alábbiak szerint:
Mint látható, mind a négy paramétereket ugyanabban a sorrendben. Ha visszaállítja az első két érték, a téglalap lesz kirajzolva a bal felső sarokban a vásznon.
3. példa - vonal és összetett formák
El tudod képzelni, a fenti módszerek nem alkalmasak létre bonyolult alakzatokat. Rajzoljunk egy háromszög a vásznon. Ez nem olyan nehéz, mint amilyennek látszik első pillantásra.
beginPath () módszerre van szükség annak érdekében, hogy azt mutatják, az elején a rajz egy tetszőleges szám. moveTo () metódus beállítja a kezdő koordináta rajz. Képzelheted, hogy két paraméter - a koordináták x és y. Tehát, készülj fel, hogy dolgozzon bonyolult alakzatokat kell ezeket a sorokat:
field.beginPath ();
field.moveTo (30, 30);
Például elkezdem felhívni egy háromszög, a 30 ponttól pixel jobbra és lent a bal felső sarokban a vásznon. Rajz keresztül történik vonalak, lineTo () metódus:
field.beginPath ();
field.moveTo (30, 30);
field.lineTo (150, 100);
field.lineTo (250, 30);
field.closePath ();
field.lineWidth = 3;
field.strokeStyle = 'ezüst'
field.stroke ();
Aztán rakott egy csomó kód, de mindent elmagyarázok, de nézd meg az eredményt:
Mint látható, elég egy háromszög. Felhívjuk a mi kiindulási pont egy sorban, hogy a végpont, ami található a megadott koordinátákat: 150 képpont elejétől a vászon x-tengely, és a 100 - az elején a y. Minden koordinátákat megadva képest a felső bal szélén a vásznon, hanem az a hely, ahol a vonal véget ért. Emlékezzetek erre, mert sokkal könnyebb megérteni, és a fejedben lehet képzelni az eredményt.
Valójában, closePath () módszer befejezi az ábrákra, ez jelzi, miután az utolsó húzott vonal. Egyéb paraméterek:
vonalszélesség = 3; - vonal szélessége 3 képpont;
strokeStyle = 'ezüst'; - vonal színe ezüst;
szélütés (); - FIGYELEM! Anélkül, hogy ez a módszer, a végén mi vonal nem jelenik meg, és a háromszög nem lesz látható. Ezért írja elő kötelező.
Érdekes a világ helyszíni építési
Ön előfizetett. És köszönöm.