Bevezetés a vászonra
Ebben a cikkben fogjuk bemutatni, hogy egy új elemet c HTML5 - vászon, amely lehetővé teszi, hogy dolgozzon különböző tárgyak és a kijelző a legtöbb modern böngészőben. Elolvasása után ez a bemutató, akkor megtanulják, hogyan kell elérni a canvas elem, felhívni a formák, módosítsa a színeket, és törli tárgyakat. Jegyet a világ a modern webes technológiákat.
Ismerje meg a Canvas elem
Használja a canvas elem nagyon egyszerű
Amikor meghallja a szót, vászon, akkor azonnal arra gondol az új HTML5 elemek ugyanazzal a névvel. Technikailag ez csak félig igaz, de ne beszéljünk, hogy most. A rajzlap elem - az innováció minden böngészőben.
Annak érdekében, hogy a canvas elem, akkor csak meg kell, hogy megteremtse a megfelelő HTML tag, majd határozza meg a szélesség és magasság.
De ez természetesen nem minden. Kódot írt alá fogják helyezni a vásznon oldalon átlátszó háttérrel. Megjegyzés: a tartalmat a belsejében vászon címke csak akkor jelenik meg, ha a böngésző elavult, és nem támogatja ezt a funkciót.
Ez az elem a legtöbb modern böngésző
Meg kell jegyeznem, hogy a legtöbb modern böngésző támogatja ezt az elemet, akkor az Internet Explorer legfrissebb.
By the way, akkor aktiválja ezt az elemet és korábbi verziói az Internet Explorer segítségével ezt a plugint - Explorer Canvas.
elem méretű a Canvas
A példában felett található a már látott, hogyan kell használni a szélesség és magasság attribútumokat: szélesség és magasság. A CSS, akkor is ellenőrizni a méret, vászon, mint a többi HTML-elemeket. És ez elég logikus. Mivel azonban a vászon használ a funkcionális összefüggésben az úgynevezett kétdimenziós, akkor az alkalmazás a CSS a méret a vászon, vezet az a tény, hogy az összes belső alkatrészt torz lesz.
Egy kis kétdimenziós összefüggésben
Egy kicsit magasabb, azt mondta, hogy a canvas elem - ez csak a történet egyik fele. A második félidő - pontosan ez a kétdimenziós összefüggésben, amely lényegében lehetővé teszi, hogy minden erejét és funkcionalitását az adott elem.
koordináta
Ha valaha is dolgozott nyelvek foglalkozni 2d grafika (például ActionScript, feldolgozása, stb), akkor mindent tudni koordináta-rendszer alapján mozgás. A kétdimenziós összefüggésben a canvas elem nem különbözik ezeket a rendszereket. A készülék szabványos derékszögű koordinátarendszerben a kezdőpont (0, 0) található a bal felső oldalon. Mozgás jobbra növeli a tárgy értéke x tengely, míg a lefelé irányuló mozgás növeli az értékét pontot az objektum Y tengelye mentén. Elég primitív.
Egy egység ezen koordinátarendszer egyenlő egy pixel a képernyő (a legtöbb esetben).
Hozzáférés a kétdimenziós összefüggésben
Ennek eredményeként, a hívás getContext módszer CTX változó most utal egy kétdimenziós környezetben. Ez azt jelenti, hogy mostantól a változó kezdhetjük felhívni a formák a vásznon. Cool, mi?!
felhívni négyzetek
Most, hogy már van, hogy egy kétdimenziós környezetben, nyugodtan kezdjük élvezni az összes funkcióját a fenti API. Az egyik leggyakrabban használt funkciók fillRect, amely megteremti a fekete négyzetek (alapértelmezett).
Add hozzá a következő kódot a CTX változó, beszéltünk erről korábban:
Ez a kód fog készíteni egy fekete négyzet a bal felső oldalon a vásznon. Mint ez itt:
Gratulálunk! Az imént húzott az első szám a HTML5 canvas elem. Hogy érzi magát?
A módszer lehet előírni fillRect 4 paraméterek:
- Először - ez a pozíció mentén az x-tengely;
- A második - ez a helyzet az y tengely;
- A harmadik - a paraméter felelős a szélessége;
- Negyedik - a magasság.
Ha a festék a prototípus módszer pszeudo-kódot, akkor a következőképpen néznek ki:
Ez a függvény egy sor érv, mint fillRect. Ennek eredményeként, akkor kap egy másik tér:
Csak. Elegáns. És még egyszer egyszerű! Most már értem, az elveket, amelyek a dolgozó elem vásznon. Minden más módszerekkel, mint ezek. Használd őket könnyen. Ha úgy gondolja, ez valami primitív, de ne aggódj. Mindezek az elemek együtt csodákra képes.
program rajz
Amellett, hogy a doboz (amely lehet levonni az egyik API), akkor is felhívni a formák a saját rendszer. Mivel a rendszerek hozhatók létre, egyenes vagy görbe vonalak, valamint a bonyolultabb formák.
Hogy egy teljes kör, akkor kell használni a következő módszerek az API:
- beginPath: start áramkör;
- moveTo: módszer, hogy hozzon létre egy pont;
- lineTo: vonalat rajzol pontról pontra, amelyek által létrehozott moveTo, vagy arra a pontra, az utolsó sor húzott lineTo;
- closePath: így zárja az áramkört.
- töltse: töltse ki a forma, szín.
- löket: egy hurok.
Próbálja ki a következő példát:
Ez a kód fog készíteni egy fekete háromszög:
Ugyanezek az elvek segítségével felhívni a formák, hogy szükség van. A következő lecke foglalkozik a témával, megbeszéljük fejlettebb rajz formák, mint ovális, Bezier görbe és mások.
Érdemes megemlíteni róla most: rajz program létrehozásához használt bonyolultabb alakzatok, mint téglalapok.
változó színek
Állapítsa itt, elvileg nincs semmi, úgyhogy azonnal ültessék át a gyakorlatba:
Ez a kód színezni a négyzet alakú piros:
Vagy meg lehet változtatni a szegélyszín a tér:
Így megtanulják alkalmazni ezeket a módszereket:
Módszerek fillStyle strokeStyle és kényelmes, hogy az általuk használt ugyanolyan színű, mint a kedvenc CSS. Ez azt jelenti, hogy az RGB, RGBA, HSA, speciális szavak ( „piros”), vagy hexadecimális értékeket.
Azonnal érdemes megjegyezni, hogy a színváltozás nem vezet az átalakulás a meglévő tartalmak canvas elem. Például, ha húzol egy fekete téglalap, akkor létrehozott egy töltőanyag a piros színt, majd felhívta a másik téglalap, az első szám marad fekete.
A változás vonalvastagság
Felveheti ezt a kódot az előző példa:
És ez az, amit kapsz eredményeket:
Ugyanez az elv alkalmazandó a rendszereket. Például, lehet módosítani a példát a háromszög:
És ez az, amit kapsz:
Erase tárgyak Canvas
Az utolsó dolog, amit szeretnék megmutatni, ma - ez elmosódása tárgyakat. Ön már tudja, hogyan kell felhívni a szám. Most itt az ideje, hogy megtanulják, hogyan kell megszabadulni tőle :)
Ebben a példában, a vásznon 500px széles és 500 képpont magas. Ahhoz, hogy megtisztítsák az egész területet, akkor a következőket kell tennie:
Ebben a példában, valószínűleg nem lesz szükség, hogy ellenőrizze a munkát egy képernyőképet a kódot, így nem fogja látni semmit. A tér valójában húzott, majd azonnal törlődik.
Megjegyzés: Az érvek clearRect módszer ugyanaz, mint a fillRect; x, y, szélesség és magasság.
Ha még nem döntött a magasság és a szélesség, írhat ezt így:
Törlése kis fragmentumokat
Annak érdekében, hogy törli egy kis töredéke, akkor nem tisztítottam az egész terület a vásznon. Törölheti a kívánt területet gond nélkül. Képzeld el, hogy rajzolt 2 terek, amelyek közül az egyik a törölni kívánt:
Abban a pillanatban, hogy a kép a következő:
Akkor gond nélkül törölheti a fekete négyzet, és a piros bal a helyén clearRect módszer:
Megjegyezzük, hogy az adatokat meg kell egyezniük, hogy létrehozásakor megadott elem. Tény, hogy ez a módszer egyszerűen kicseréli az átláthatóságot pixelek egymástól:
Elég egyszerű, nem? Nem gyakran mosott ruhák a rajz, de a tudást meg kell, amikor megtudjuk, hogy nem az animációt.
Mi megy a korral
Canvas könnyű használni és tanulni
Remélem győződve arról, hogy a vásznon - ez egy nagyon ígéretes weboldal elem. Ez lehetővé teszi, hogy a képeket a tiszta kód nélkül plug-inek. Könnyen kezelhető és tanulni, és valóban, a jobb kéz viszont valami nagyon eredeti.
A következő cikkben, nézzük meg néhány speciális módszereket dolgoznak a canvas elem, mint a rajz ovális, görbék és egyéb dolgok. Ha ez nem lenne elég, akkor a jövőben mi megmutatjuk, hogyan kell átalakítani tárgyak (forgatás, csökkentése, növekedés), hogyan kell dolgozni a képeket, valamint as'll munka animáció. Ez nagyon érdekes, akkor veszem a szót rá.
És most, remélem, hogy van egy csomó hasznos információt, amely lehetővé teszi, hogy egy általános képet a vászonra. Ez az elem - ez egy fantasztikus technológia, amely lehetővé teszi, hogy észre a fantáziád, hogy tárolja a fejét.
5 óra az utolsó oszlop „HTML és DHTML”
Írásakor vagy hibát PHP scriptek, gyakran használja a var_dump () és print_r (), hogy megjelenjen egy sor fejlett adatok és objektumok. Ebben a bejegyzésben szeretnék mesélni var_export () függvény, amely képes átalakítani a tömb megfelelő formátumba a PHP kódot.
Egy pár ingyenes sablonok admin panel.
Sablon létrehozása írásra nem egy egyszerű dolog. Nálunk válogatott 30 helyszínen, ahol lehet letölteni ezeket a sablonokat, hogy megfeleljen minden ízlést.
Például, ha van egy keresőmező, amely a feldolgozott minden egyes megnyomásakor egy billentyűt. Ha valaki meg akarja írni a szót a Windows, AJAX kérés fog küldeni a következő részletet: W, Wi, Win, szél, Windo, ablak, Windows-t. A probléma?.
Válogatás a 15 új területek, ahol lehet letölteni ingyenes kép, hogy töltse ki az oldalakat.
Ez a könyv már régóta minden olvasni, és aztán csak felébredt.
adaev_kazbek
Ez rokon mondja - bolond nem érti, okos lesz hallgatnak. A mi esetünkben, sok ember még mindig nem érti az internetes felhasználásra, de próbálja meg. Ami nekem, én az első évben próbál tanulni az egészet egyedül, hogy feltétlenül lesz képes alkalmazni az ismereteket a gyakorlatban, és biztos vagyok benne, hogy Eugene nem csupán egy kilogramm tanítani kezdők, és hálás lesz. Mi a helyzet akkor, csak olvastam sokáig - mi volt a megjelenés? ;-)
JS_JQ_BEST
Egyetértek veled, ez a lecke van szükség, akkor könnyebb lesz tanulni!
Nem olvastam. De eddig úgy tűnik számomra elején.
profesor08
Ugyanez a CSS tulajdonság - a határon / border-radius. Fent háromszög legyen egy kicsit több khimichit. És bárhol működik.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!