Úvod do úlohy

Canvas je plocha, na kterou kreslíme pomocí souřadnic. Každý bod na plátně má x (vodorovnou) a y (svislou) souřadnici.

• Osa X roste směrem doprava.

• Osa Y roste směrem dolů.

• Levý horní roh má souřadnice (0, 0).

To je jiné než v matematice, kde obvykle osa Y roste nahoru. V canvasu tedy platí, že čím větší hodnota y, tím níž se tvar vykreslí. Pokud nakreslíme obdélník na (20, 20) o rozměrech 100 × 50, bude začínat 20 pixelů od levého a 20 pixelů od horního okraje a zabere prostor až po bod (120, 70).

Kreslení není omezeno jen na čáry – velmi často potřebujeme vyplněné tvary. Canvas nám nabízí jednoduché metody pro obdélníky, kruhy a také gumování. Naučíme se také používat barvy a průhlednost.

Teorie a principy

• Obdélníky:

  • fillRect(x, y, w, h) – vyplněný obdélník.

  • strokeRect(x, y, w, h) – jen obrys.

  • clearRect(x, y, w, h) – smaže část plátna.

• Cesty a kruhy:

  • beginPath() – začátek nové cesty.

  • arc(x, y, r, startAngle, endAngle) – nakreslí oblouk nebo celý kruh (úhly v radiánech).

  • fill() – vyplní cestu.

  • stroke() – obkreslí cestu.

• Stylování:

  • ctx.fillStyle = "barva"; – barva výplně.

  • ctx.strokeStyle = "barva"; – barva obrysu.

  • ctx.globalAlpha = číslo; – průhlednost (0 = průhledné, 1 = neprůhledné).

Praktické příklady kódu

Typické chyby

• Zapomenutý beginPath() → kruh se spojí s předchozím tvarem.

• Použití stupňů místo radiánů → arc() vyžaduje úhly v radiánech (Math.PI místo 180).

• Neobnovení globalAlpha → další tvary zůstávají průhledné, i když jsme to nechtěli.

• Představa, že osa Y roste nahoru → ve skutečnosti roste dolů.

• Záměna souřadnic se šířkou a výškou → u fillRect první dva parametry jsou pozice, další dva rozměry.

Shrnutí

• Canvas má souřadnicový systém s počátkem v levém horním rohu (0,0).

• Osa X roste doprava, osa Y dolů.

• Obdélníky: fillRect, strokeRect, clearRect.

• Kruhy: arc + fill nebo stroke.

• Styly kreslení se nastavují přes fillStyle, strokeStyle a globalAlpha.

• clearRect funguje jako „guma“ na části plátna.

Úloha

Zadání (kontext úlohy):

Na prázdném canvasu chceme zobrazit několik základních tvarů – obdélník, kruh a ukázku „gumování“ pomocí clearRect().

Cíl úlohy:

Student si procvičí kreslení vyplněného obdélníku, kruhu pomocí cesty a mazání části plátna.

Vstupní podmínky:

Student pracuje pouze se souborem index.html, který obsahuje <canvas> s id platno. JavaScriptový kód bude umístěn přímo ve <script> na konci stránky.

Požadovaný výstup:

• Na plátně se objeví vyplněný zelený obdélník.

• Vedle něj bude nakreslený modrý vyplněný kruh.

• Část obdélníku bude „vymazaná“ pomocí clearRect().

Doplňující pokyny:

• Nezapomeň začít nový tvar pomocí beginPath() při kreslení kruhu.

• Úhel v arc() zadávej v radiánech (pro celý kruh použij 0 až 2 * Math.PI).

• clearRect() funguje jako guma – vymaže zadaný obdélník uvnitř plátna.

Řešení úlohy

Co je zde splněno

• Vyplněný zelený obdélník (fillRect).

• Část obdélníku je vymazána pomocí clearRect.

• Vykreslen modrý kruh pomocí beginPath(), arc() a fill().

• Použity správné radiány pro celý kruh (0 až 2 * Math.PI).

Poznámky

• Pokud by chybělo beginPath(), mohl by se kruh spojit s jinými tvary.

• clearRect() pracuje nezávisle – funguje i na tvarech vykreslených předtím.