Výukový program pre kreslenie HTML5: Základy kreslenia na plátno

Obsah

• Dôležitosť webových štandardov
• Vytváranie základnej webovej stránky HTML5
• Pridanie prvku HTML5 Canvas
• Kreslenie pomocou JavaScriptu na plátno HTML5
• Príklad 1: Kreslenie obdĺžnikov na plátno HTML5
• Príklad 2: Kreslenie smajlíka na plátno HTML5
• Potrebujem closePath ()?
• Ako funguje kreslenie smajlíka?
• Ako kresliť oblúky na plátne HTML5
• Ďalšie návody pre HTML5

Simeon Visser je spisovateľ, ktorý sa rád venuje témam, ako sú technológie a cestovanie.

V tomto výučbe ukážem, ako používať prvok plátna v HTML5 na vytvorenie nádhernej grafiky pre váš web. Webový štandard HTML5 pridáva do kódu HTML, ktorý je jazykom všetkých webových stránok, niekoľko nových funkcií. Jednou z týchto nových funkcií je prvok plátna. Plátno umožňuje kresliť pomocou kódu JavaScript, takže pri zobrazovaní môžete byť veľmi kreatívni. Budem diskutovať o dvoch príkladoch kresby na plátne HTML5, ktoré využívajú niektoré zo základných funkcií kreslenia.

Tento výukový program je zameraný na ľudí, ktorí môžu vedieť niečo o tom, ako funguje HTML, ale ktorí nie sú oboznámení s prvkom plátna. Možno začínate s vývojom webových aplikácií alebo sa chcete dozvedieť viac informácií o prvku canvas v jazyku HTML5. Tento výukový program prejde všetkými krokmi bez toho, aby predpokladal príliš veľa základných informácií. Odporúčam prečítať si niečo málo o HTML, aby ste vedeli, čo je to element a ako vyzerá HTML všeobecne. Ak je niečo nejasné, zanechajte prosím komentár nižšie.

Dôležitosť webových štandardov

Pretože má toľko počítačov a webových prehľadávačov prístup na internet, je veľmi dôležité dodržiavať všetky existujúce webové štandardy. Ak píšete webovú stránku v HTML5, potom sa naozaj chcete ubezpečiť, že je platná podľa webového štandardu HTML5. Môžete použiť validátor W3C a ubezpečiť sa, že vaša webová stránka je skutočne webovou stránkou HTML5. Preto začneme základnou prázdnou webovou stránkou platnou pre HTML5 a potom pridám všetky potrebné veci na kreslenie na plátno.

Vytváranie základnej webovej stránky HTML5

Prvým krokom je vytvorenie základného súboru .html s kódom HTML5. Toto je naša prázdna stránka HTML5. V ďalších krokoch tohto tutoriálu pridáme plátno a kód JavaScript, aby sme niečo nakreslili.

Musíte urobiť nasledovné:

• Otvorte textový editor.
• Skopírujte kód uvedený nižšie a vložte ho do nového súboru
• Uložte súbor ako základný textový súbor a dajte mu názov, ktorý končí na .html (uistite sa, že je to niečo ako name.html a nie name.html.txt. Ak je to tak, musíte ho premenovať a znova otvoriť v textový editor).

Ak používate Windows, mali by ste používať buď NotePad, alebo WordPad, ale nie Microsoft Word. Dôvod je ten, že chcete svoju prácu uložiť ako základný textový súbor, nie s pridanými informáciami. Ak používate GNU / Linux alebo Mac OS X, stačí použiť obľúbený textový editor, ktorý vám umožní ľahko vytvárať a ukladať základné textové súbory. Je ešte lepšie použiť jeden z textových editorov programátora, ktorý má ďalšie funkcie pre programátorov a vývojárov webu. Nemusíte sa však obávať: jednu z nich si môžete kedykoľvek stiahnuť, keď sa budete viac venovať vývoju webových aplikácií a počítačovému programovaniu.

Tu je prázdna webová stránka HTML5:

! DOCTYPE html> html> head> meta http-equiv = "Content-type" content = "text / html; charset = UTF-8"> title> Výukový program HTML5: Základy kresby na plátne / title> / head> body> / body> / html>

Otvorte tento súbor vo svojom webovom prehliadači. Mali by ste vidieť prázdnu stránku a názov webovej stránky je „HTML5 Tutorial: Basics of Canvas Drawing“. Ak to vidíte, úspešne ste vytvorili webovú stránku HTML5.

Pri písaní kódu HTML alebo počítačového kódu je dôležité pravidelne kontrolovať, či postupujete správne. Napíšete pár bitov kódu a potom skontrolujete, či webová stránka vyzerá tak, ako chcete. Ak to urobíte, môžete prejsť na ďalšiu vec a ak sa tak nestane, môžete to okamžite napraviť.

Každá webová stránka HTML sa skladá z prvku html a je v ňom prvok hlavy a prvok tela. V záhlaví nájdete všetky druhy informácií, ktoré nie sú súčasťou samotnej stránky, ale sú stále potrebné, napríklad nadpis alebo odkazy na iné súbory (napríklad súbory CSS a JavaScript). Zatiaľ používame iba prvok title. Ako vidíte, prvok tela je prázdny, a preto na tejto webovej stránke nie je nič! Teraz pridáme prvok plátna, ktorý nám umožní kresliť na túto časť webovej stránky.

Pridanie prvku HTML5 Canvas

Element plátna môžete pridať pridaním nasledujúcich prvkov do prvku body vyššie uvedenej webovej stránky HTML5:

canvas id = "mycanvas" width = "300" height = "300"> / canvas>

Čo to znamená? Znamená to, že definujete prvok plátna s atribútmi id, width a height. Všetky sú potrebné pre tento tutoriál. Musíte určiť šírku a výšku plátna v počte pixelov, aby webový prehliadač vedel, aké veľké je plátno. Ak nezadáte rozmery plátna, potom je predvolená šírka 300 pixelov a predvolená výška 150 pixelov. V našom výučbe potrebujeme väčšie plátno, takže použijeme šírku 300 a výšku 300.

ID je povinné ako identifikátor, aby sme sa mohli v našom kóde JavaScriptu odvolať na plátno. Toto ID musí byť na vašej webovej stránke jedinečné - nemôžete mať ďalší prvok s rovnakým ID.

Vaša webová stránka HTML5 by teraz mala vyzerať takto:

! DOCTYPE html> html> head> meta http-equiv = "Content-type" content = "text / html; charset = UTF-8"> title> Výukový program HTML5: Základy kresby na plátne / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / plátno> / telo> / html>

Ak teraz zobrazujete webovú stránku v prehliadači, neuvidíte žiadny rozdiel v porovnaní s tým, ako vyzerala webová stránka predtým. Stále je to biela prázdna webová stránka. Je to preto, že sme na plátno ešte nič nenakreslili: plátno tam je, ale farba pozadia je predvolene biela, takže ju ešte nevidíte.

Je čas kresliť na plátno!

Kreslenie pomocou JavaScriptu na plátno HTML5

Ak chcete kresliť na plátno HTML5, musíte napísať nejaký kód JavaScript, ktorý hovorí, čo je potrebné nakresliť. JavaScript je známy skriptovací jazyk pre web a používal sa pri mnohých veciach, ako sú interaktívne webové stránky a webové aplikácie.

Musíme urobiť nasledovné: musíme nájsť spôsob, ako odkazovať na prvok plátna, a potom musíme napísať niekoľko príkazov, ktoré nakreslíme na plátno. Robíme to tak, že dostaneme takzvaný kresliaci kontext plátna. Pomocou kontextu môžeme spustiť niektoré príkazy, ktoré určujú, čo treba nakresliť.

Pozrite sa na toto a ubezpečte sa, že vaša webová stránka vyzerá aj takto:

! DOCTYPE html> html> head> meta http-equiv = "Content-type" content = "text / html; charset = UTF-8"> title> Výukový program HTML5: Základy kresby na plátne / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

Pridali sme JavaScript s dvoma riadkami kódu. Prvý riadok vytvára premennú nazvanú canvas, ktorá obsahuje prvok canvas. Ak ste použili iné ID, mali by ste tiež zmeniť tento riadok. Funkcia getElementById vám dáva prvok v dokumente HTML s týmto ID, takže je dôležité vyhľadávať prvok s ID plátna. Druhý riadok nám poskytuje premennú ctx s kontextom kreslenia prvku plátno. V tomto prípade je to kontext 2D výkresu, pretože budeme robiť dvojrozmerné výkresy.

Príklad 1: Kreslenie obdĺžnikov na plátno HTML5

Začnime niečím jednoduchým - len niekoľkými obdĺžnikmi! Pridajte nasledujúci kód do kódu JavaScript svojej webovej stránky:

ctx.strokeStyle = "rgb (0, 0, 255)"; ctx.strokeRect (10, 10, 50, 50); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (30, 30, 50, 50);

Aby sme porozumeli vyššie uvedenému kódu, musíme poznať rozdiel medzi hladením a plnením. Pri pohladení jednoducho nakreslíte obrys obdĺžnika a pri vyplnení zafarbíte aj jeho vnútro. Ak chcete zmeniť farbu, ktorú pohladíte alebo vyplníte, musíte zmeniť tahStyle alebo fillStyle. Potom môžete zavolať zdvihRect alebo fillRect na zdvih alebo vyplnenie obdĺžnika na konkrétnom mieste.

Farbu môžete určiť pomocou farebného modelu RGB (rvyd / green / blue) alebo môžete použiť hexadecimálne hodnoty. Rozhodol som sa použiť farebný model RGB, pretože je ľahšie pochopiteľný, hoci hexadecimálna hodnota funguje úplne rovnako (ale môžeme sa na ňu pozrieť niekedy inokedy). Pre RGB musíte určiť, koľko červenej, zelenej a modrej farby by sa malo použiť na vytvorenie farby (z toho vyplýva tri hodnoty). Hodnoty sú od 0 do 255, kde 0 neznamená nič z tejto farby a 255 znamená všetko z tejto farby. Môžete myslieť na červené, zelené a modré svetlo, ktoré je do istej miery zapnuté a spolu vytvárajú farbu. To znamená, že farba (0, 0, 0) je čierna, zatiaľ čo (255, 255, 255) je biela.

Hodnoty, ktoré strokeRect a fillRect potrebujú, sú súradnica x, súradnica y, šírka a výška obdĺžnika. Hovorí sa im argumenty zdvihRect a fillRect. Nie sú to nevyhnutne pixely, ale sú v súradnicovom systéme kontextu kreslenia. Ľavý horný roh je (0, 0), pričom os x je vodorovná os a os y zvislá os. Napríklad vyššia súradnica x znamená, že ste sa posunuli viac doprava a vyššia súradnica y znamená, že ste sa posunuli viac nadol.

V prvých dvoch riadkoch hladíme obdĺžnik v modrej farbe a v posledných dvoch riadkoch vypĺňame obdĺžnik v červenej farbe. Malo by to vyzerať takto:

Podobne nasledujúci kód produkuje štyri vyplnené obdĺžniky vo farbách červená, zelená, modrá a žltá. Stačí odstrániť predchádzajúci kód a nahradiť ho nasledujúcim:

ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgb (0, 255, 0)"; ctx.fillRect (35, 35, 50, 50); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.fillRect (100, 10, 100, 100); ctx.fillStyle = "rgb (255, 255, 0)"; ctx.fillRect (120, 30, 20, 20);

Bude to vyzerať takto:

Príklad 2: Kreslenie smajlíka na plátno HTML5

Teraz môžeme prejsť na trochu zložitejšiu kresbu zahŕňajúcu kruhy a oblúky. Chystáme sa nakresliť smajlíka, ktorý v podstate nie je nič iné ako farebné kruhy v správnych pozíciách. Najprv vám dám kód a potom podrobnejšie vysvetlím, čo sa deje. Stačí odstrániť výkresový kód z predchádzajúceho príkladu a nahradiť ho nasledujúcim:

ctx.beginPath (); ctx.arc (150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (120, 130, 20, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (123, 133, 4, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (183, 133, 4, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (155, 165, 60, 0, 3, nepravdivé); ctx.closePath (); ctx.lineWidth = 5; ctx.strokeStyle = "rgb (255, 255, 0)"; ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill ();

Potrebujem closePath ()?

Je to trochu zložitejšie. Pri plnení alebo hladení nemusíte vždy potrebovať closePath (), pretože aj tieto príkazy uzatvárajú cestu. Môžete tiež získať nasledujúci kruh:

ctx.beginPath (); ctx.arc (...); ctx.fillStyle = ... ctx.fill ();

Ako funguje kreslenie smajlíka?

Čo tam robia všetky tie príkazy beginPath a closePath? Začnime tým, že sa bližšie pozrieme na fillRect z predchádzajúceho príkladu. Je potrebné si uvedomiť, že tento príkaz robí dve veci: vytvorí obdĺžnik, ale taktiež ho vyplní určitou farbou. Nie vždy sa vám chce robiť tieto veci spoločne; pri vytváraní vlastného tvaru budete možno chcieť najskôr urobiť celý výkres a potom ho pohladiť alebo vyplniť. To je to, čo tu budeme robiť. Všetky príkazy na kreslenie sa spoločne nazývajú cesta a potom sa rozhodneme, ako cestu zobraziť (hladením alebo vyplnením).

Prvý oblúk slúži na nakreslenie červenej tváre, ďalšie štyri príkazy oblúka na nakreslenie bielych očí s modrými zrenicami a posledný oblúk na nakreslenie úst. Všimnite si, ako tento oblúk hladíme a vypĺňame: aj keď nekreslíme celý kruh, stále ho môžeme vyplniť farbou a vytvoriť tak ústa.

Keď vytvoríte cestu s beginPath, môžete vytvoriť všetky svoje vlastné tvary pomocou rôznych druhov príkazov na kreslenie. Potom môžete cestu uzavrieť pomocou closePath. Potom zadáme strokeStyle alebo fillStyle a potom spustíme niektoré príkazy ťahu alebo výplne na nakreslenie tvaru. Môžete tiež najskôr určiť štýly a potom vytvoriť cestu. Príkazy mŕtvice a výplne musia byť vždy posledné, pretože používajú mŕtvicu Štýl a výplň rovnako ako cestu, ktorú ste práve vytvorili.

Ako kresliť oblúky na plátne HTML5

Pomocou príkazu arc vytvoríme kruhy alebo časti kruhov. Ak chcete nakresliť oblúk, musíte určiť jeho súradnicu x, jeho súradnicu y, jej polomer, začiatočný uhol, koncový uhol a to, či chcete kresliť proti smeru hodinových ručičiek. Polomer označuje, aký veľký môže byť oblúk alebo kruh (jedná sa o matematický polomer kruhu). Počiatočný a koncový uhol označujú, kde chcete začať s kreslením oblúka a kde chcete skončiť s kreslením oblúka. Je to užitočné, keď nekreslíte celý kruh, ale iba polkruh. Na záver musíte povedať, či chcete kresliť proti smeru hodinových ručičiek alebo nie (pravda, ak chcete, a nepravda, ak to nechcete).

Počiatočný a koncový uhol oblúka sú špecifikované v radiánoch, ktoré sa pohybujú od 0 do 2-násobku matematickej konštanty pi. Hodnota 0 pre začiatočný uhol znamená, že začínate na východe (v polohe 3 hodín) a koncový uhol 2 * pi znamená, že chcete nakresliť celú kružnicu (chcete oblúk 2 * pi v radiánoch, takže je to celý kruh).

Napríklad, ak chcete polkruh, mali by ste začiatočný uhol 0 a koncový uhol pí namiesto 2 * pi. Tento polkruh by bol spodnou polovicou kruhu. Ak chcete hornú polovicu, musíte mať začiatočný uhol pí a koncový uhol 2 * pi.

Napríklad kruh na (100, 100) s polomerom 50, začínajúci kresliť od východu (0) a nakresľujúci celý kruh (2 * pi) v smere hodinových ručičiek (nepravdivý pre proti smeru hodinových ručičiek), by bol ctx. oblúk (100, 100, 50, 0, Math.PI * 2, false); Skúste sa pohrať s počiatočným a konečným uhlom, aby ste získali predstavu o tom, aké by mali byť ich hodnoty, keď nechcete nakresliť celý kruh.

Všimnite si, že pre posledný oblúk používam hodnotu 3 namiesto pí (3,14 ...), takže je to o niečo menej ako polkruh. To vytvára príjemný dotyk pre ústa smajlíka. Všimnite si, že špecifikujem aj lineWidth, ktorý zjavne mení šírku čiary okolo úst. Táto hodnota pre lineWidth sa používa pri hladení.

Ako som prišiel na všetky hodnoty súradníc a uhlov? Chvíľu som sa len tak pohrával, kým som dostal, čo som chcel. Keď poznáte súradnicový systém a uhly, viete, aké zmeny musíte urobiť, aby ste pohli očami alebo zväčšili ústa.

Ďalšie návody pre HTML5

• Výukový program HTML5: Kreslenie kruhov a oblúkov
  Kreslenie kruhov a oblúkov v HTML5 môže byť celkom výzva. V tomto návode vysvetľujem, ako kresliť kruhy a oblúky a ako sa merajú uhly oblúkov. Tento výukový program obsahuje veľa príkladov.
• Výukový program HTML5: Kreslenie textu s efektnými farbami a efektmi
  Dokážete oveľa viac, ako len kreslenie textu v HTML5! V tomto výučbe ukážem rôzne efekty na vytvorenie efektných textov vrátane tieňov, prechodov a rotácie.

Tento článok je presný a pravdivý podľa najlepšieho vedomia autora. Obsah slúži iba na informačné alebo zábavné účely a nenahrádza osobné rady ani odborné rady v obchodných, finančných, právnych alebo technických záležitostiach.