Obsah
S různými metodami kreslení, které jsou uvedeny v plátno Je možné v nich definovat oblasti pro kreslení, i když je to trochu složitější, je to zcela proveditelné, ale máme také možnost dosáhnout stejného výsledku pomocí metody clip ().Další aspekt, který lze také začlenit do souboru canvas je kresba textu, možná si myslíme, že pomocí CSS a dalších prvků můžeme nakreslit text, který je stejný nebo lépe vypadá, ale je v plátno umožňuje nám použít nativní animace v HTML5.
Clip metoda
Jak jsme zmínili na začátku, tato metoda zjednodušuje cestu k jak můžeme vytvořit sekci na plátně, aby bylo možné zavést další nakreslené prvky, například nový výkres, nebo jej vyplnit konkrétní barvou.
K použití tohoto nástroje musíme zavolat metodu klip ()Tato metoda vytvoří oblast výstřižek nebo nový oddíl, podívejme se v následujícím kódu, jak to funguje:
Příklad Váš prohlížeč prvek nepodporuje plátno V tomto kódu nejprve nakreslíme velký obdélník žlutou barvou, poté v něm vytvoříme novou oblast pomocí metoda clip () a v této oblasti generujeme nový červený obdélník.
Podívejme se, jak to vypadá v našem prohlížeči:
Můžeme také kreslit text na plátno, k tomu máme následující metody:
fillText (, x, y, šířka): Nakreslí a vyplní text určený v prvním parametru v poloze (x, y). Také jeho argument šířka je volitelný, ale když je deklarován, nastavuje limit na šířku textu.
strokeText (, x, y, šířka): Nakreslí a ponechá text bez odsazení na pozici (x, y). Stejně jako předchozí metoda ve svém volitelném argumentu omezuje šířku textu.
Podívejme se na následující příklad, jak pomocí těchto metod kreslit text na naše plátno:
Příklad Váš prohlížeč prvek nepodporuje plátno V tomto kódu používáme obě metody k nakreslení stejného textu, a to jak na stejnou pozici, ale s jinou barvou, pomocí které dosáhneme efektu vnějšího rámce jedné barvy a výplně jiné barvy, čímž můžeme vytvořit více výrazný rozdíl mezi fillText Y strokeText.
Nakonec a abychom tento tutoriál dokončili, podívejme se, jak to vypadá v prohlížeči.
