Úvod do úlohy

Když už umíme na canvasu kreslit základní tvary, dalším krokem je dát jim barvu a vzhled. Právě díky výplním a obrysům začnou tvary působit plastičtěji a dají se snadno odlišit. Canvas nabízí jednoduché metody jako fillRect(), které okamžitě vykreslí vyplněný obdélník, ale také možnost nastavit barvu a průhlednost výplně (fillStyle a globalAlpha) nebo kombinovat výplň s obrysem (strokeStyle, lineWidth). To je důležité pro tvorbu jednoduchých grafických prvků, jako jsou tlačítka, grafy nebo ikony.

Teorie a principy

• Výplň obdélníku:

  • fillRect(x, y, width, height) – vykreslí vyplněný obdélník rovnou (není potřeba beginPath()).

  • Barvu výplně nastavíme pomocí ctx.fillStyle = "red"; (barva, gradient, obrázek).

  • Průhlednost můžeme řídit buď fillStyle (RGBA formát), nebo nastavením ctx.globalAlpha.

• Obrys obdélníku:

  • strokeRect(x, y, width, height) – vykreslí jen ohraničení obdélníku.

  • Barvu nastavíme pomocí ctx.strokeStyle = "blue";.

  • Tloušťku určíme přes ctx.lineWidth = číslo;.

• Kombinace výplně a obrysu:

  • Nejprve vykreslíme fillRect, pak strokeRect.

  • Pořadí je důležité – obrys se může překrývat s výplní.

Praktický příklad kódu

Typické chyby

• Záměna fillStyle a strokeStyle – studenti nastaví barvu výplně, ale volají strokeRect, takže se nic nevyplní.

• Zapomenuté lineWidth – čára obrysu je příliš tenká a téměř neviditelná.

• Neobnovení globalAlpha – všechny další tvary zůstanou průhledné.

• Špatné pořadí – pokud vykreslíme obrys dřív a pak výplň, může být čára překryta.

Shrnutí

• fillRect() vykresluje rovnou vyplněný obdélník.

• fillStyle určuje barvu nebo vzor výplně.

• strokeRect() kreslí obrys, který ovlivňuje strokeStyle a lineWidth.

• Výplň a obrys se dají kombinovat – záleží na pořadí volání.

• globalAlpha umožňuje kreslit poloprůhledné tvary.

Úloha

Zadání (kontext úlohy):

Na plátno chceme vykreslit několik obdélníků s různým vzhledem – jeden jen vyplněný, druhý s kombinací výplně a obrysu, třetí poloprůhledný.

Cíl úlohy:

Student si procvičí práci s metodami fillRect() a strokeRect(), použití fillStyle, strokeStyle, lineWidth a globalAlpha.

Vstupní podmínky:

Student pracuje se souborem index.html, kde je vložen <canvas> s id platno. JavaScript bude ve <script> na konci stránky.

Požadovaný výstup:

• První obdélník: pouze barevná výplň (např. světle modrá).

• Druhý obdélník: oranžová výplň + červený obrys se silnější čarou.

• Třetí obdélník: zelený, ale poloprůhledný.

Doplňující pokyny:

• Nezaměňuj fillStyle a strokeStyle – první ovlivňuje výplň, druhý obrys.

• Po použití globalAlpha vrať hodnotu zpět na 1.0, aby další tvary nebyly průhledné.

• Nejprve vykresli výplň, teprve potom obrys (jinak může být překrytý).

Řešení úlohy

Co je zde splněno

• První obdélník je vykreslený jen výplní (fillRect).

• Druhý obdélník má oranžovou výplň a červený obrys se silnější čarou (strokeRect).

• Třetí obdélník je poloprůhledný díky globalAlpha = 0.5.

• Po vykreslení průhledného tvaru je hodnota globalAlpha vrácena zpět na 1.0.