HTML5 - Advanced Canvas

Při použití položky plátno pro kreslení nejsme omezeni na kreslení obdélníkových obrazců, můžeme také kreslit pomocí souřadnic a tzv cesty což jsou cesty, kterými prvek označíme plátno kde a jak ukázat naši kresbu.
Možnosti, které nám to dává, jsou působivé, protože s nezbytnými algoritmy můžeme vytvářet neomezené kompozice, kreslit jakýkoli typ obrázku v HTML5 a s ním až do dosažení výsledků ve spojení s jinými prvky, jaké si v předchozích specifikacích jazyka nikdy nepředstavovali.
Použití cesty
Jak jsme zmínili cesta to je to, co nám umožní ukázat na plátno souřadnice, podle kterých by měl být kresba vytvořena, s těmito souřadnicemi bude plátno schopno vědět, kam nakreslit odpovídající čáry a nakonec se správným nahromaděním čar můžeme dosáhnout jakéhokoli typ postavy.
Než přejdeme k odpovídajícím příkladům, musíme vědět, jaké metody jsou k dispozici pro prvek plátna a cestu, podívejme se na následující seznam:

• beginPath (): Tato metoda nám umožňuje začít novou cestu.
• closePath (): Tato metoda se pokusí uzavřít aktuální cestu nakreslením čáry od konce posledního řádku na počáteční souřadnice.
• fill (): Vyplňte formuláře popsané v dílčích cestách.
• isPointInPath (x, y): Vrátí hodnotu true, pokud je zadaný bod obsažen ve tvaru nakresleném aktuální cestou.
• lineTo (x, y): Nakreslete dílčí cestu na zadaných souřadnicích.
• moveTo (x, y): Umožňuje nám přejít na zadané souřadnice, aniž bychom museli kreslit dílčí cestu.
• přímý (x, y, w, h): Nakreslete obdélník, jehož souřadnice v levém horním rohu odpovídají (x, y), jeho šířka odpovídá w a jeho výška odpovídá h.
• mrtvice (): Nakreslete vnější linie tvarů nakreslených dílčí cestou.

Jakmile víme, jaké nástroje musíme použít na plátno, musíme znát pořadí toku, pomocí kterého můžeme kresbu vytvořit, toto pořadí je následující:
• Voláme metodu beginPath.
• Pomocí metody se přesuneme do výchozí polohy Přesunout do.
• Metodami nakreslíme dílčí cesty lineTo, atd.
• Volitelně můžeme metodu zavolat closePath.
• Nakonec zavoláme metody vyplnit nebo přisát.
Už máme doporučené pořadí pro zahájení kreslení, nyní vidíme odpovídající kód v HTML5.

 Příklad Váš prohlížeč prvek nepodporuje plátno 

Jak vidíme, jsou uskutečněna dvě volání beginPath(), tímto můžeme začít kreslit oblasti na plátně, pak pomocí moveTo () stanovíme počáteční polohy a zbytek je kreslit.
Podívejme se, jak naše kresba vypadá v prohlížeči:

Tímto tutoriál dokončíme, nejen že poznáme různé metody a další nástroje, které můžeme použít, ale také zdůrazníme, že už to nejsou jen obdélníkové tvary, které můžeme kreslit.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod