HTML5 - Kresba na plátně

Klíčem k silné struktuře jsou základy, proto musíme mít silné a přesně definované základy, abychom tedy mohli prvek využít na maximální kapacitu Plátno Nejprve musíme do hloubky znát základní aspekty, a proto se pustíme do kreslení základních tvarů. Naučíme se, jak fungují různé metody kresby, a poté můžeme vytvářet složitější kompozice.
Nakreslete obdélník
Obdélník je velmi jednoduchá postava, která se skládá ze 4 stran, podívejme se na metody, které máme k dispozici, abychom je mohli nakreslit na plátno:

• clearRect (x, y, w, h): Čistí obdélník nebo část dříve zadaného obdélníku.
• fillRect (x, y, w, h): Slouží k nakreslení vyplněného obdélníku.
• strokeRect (x, y, w, h): Slouží k nakreslení obdélníku bez výplně.

Jak jsme si všimli, všechny předchozí metody používají 4 argumenty, tyto argumenty odpovídají následujícímu:

• x a jsou limity levého horního okraje obdélníku.
• w h odpovídají šířce a výšce.

Podívejme se na jednoduchý příklad, abychom mohli tyto prvky uvést do praxe:

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

V tomto příkladu vidíme, že definujeme některé proměnné, kde říkáme ofset nebo omezte, kde začnou obdélníky, velikost a pak počet varů, který bude sloužit jako čítač pro opakování, takže v další části vidíme, že víme, že budeme obdélníky vytvářet dynamicky, podívejme se, jak jsou nakresleny v našem prohlížeč:

Vytvořili jsme dvě řady po 5 obdélnících, pokud se podíváme na kód, který jsme nazvali metody fillRect () nejprve pro vyplněné obdélníky a poté do mrtviceRect pro ty nevycpané.
Pomocí metody clearRect ()
Co když teď chceme vyčistit část vyplněných obdélníků? K tomu máme metodu clearRect (), v následujícím kódu uvidíme, jak to funguje:

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

Pro každé opakování použijeme volání metody clearRect () a při provádění algoritmu jsme jej nechali projít celým středem vyplněných obdélníků, podívejme se na následujícím obrázku, jak to vypadá v našem prohlížeči:

Zde vidíme, jak jsme vyčistili oblast, kterou jsme předtím nakreslili.
Tímto dokončujeme tento tutoriál, kde jsme byli schopni vidět trochu hlouběji některé metody, které můžeme použít k vykreslení našeho prvku Plátno.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