Obsah
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.
• 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:
