Obsah
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ě.
- x a jsou limity levého horního okraje obdélníku.
- w h odpovídají šířce a výšce.
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č:
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:
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
