Dnes budeme používat odkaz: https://adasek.cz/obrazovka/ Jestli se chcete kouknout do kódu, stahněte a rozbalte si obrazovka.zip.
Princip
Při tomto zjednodušeném vykreslování na obrazovce se postupně prochází jednotlivé body obrázku. Postupuje se zleva doprava a odshora dolů, každý bod má souřadnici na řádce (x) a souřadnici o kolikátou jde řádku (y).
Při tomto vykreslování naše pomůcka vol8 funkci obarvi
, jejíž tělo můžete vy editovat.
Funkce obarvi
Parametry funkce
Funkce přijímá čtyři čísla v proměnných x
,y
,sirka
,vyska
x
- horizontální pozice, tedy pořadí právě vykreslovaného bodu na řádku. Nejlevější bod má xovou pozici 0. Nejpravější bod máx==sirka-1
.y
- vertikální pozice, tedy číslo řádky na které bod nachází. Body z horní řádky mají yovou pozici 0. Nejspodnější řádka máy==vyska-1
.sirka
- Celkový počet bodů každé řádky obrázku (tedy šířka vykreslovaného obrázku)vyska
- Celkový počet řádek obrázku (tedy výška vykreslovaného obrázku)
Výstup
Funkce pro každý bod vrací(return
) řetězec obsahující html označení barvy, která se pro daný bod použije. Příklady výstupu: blue
, #808000
, nebo rgb(255,160,30)
. Pěkná tabulka pojmenovaných barev je na jakpsatweb.cz
Úkoly - nakreslete:
- Vodorovnou čáru
- Polskou vlajku (dva obdelníky nad sebou)
- Vlajku Německa, Francie
- Kříž nebo plusko uprostřed obrázku
- vodorovné čáry každou pátou linku
- šachovnici (0,0 bílá)
- šachovnici (0,0 černá)
- Pyramidu
- Vertikální čáru tlustou cca desetinu šířky obrazovky
- Čáru, která bude mít úhel 45°
- Kružnici
- Horní pravý trojuhelník (vyplněný jednou barvou)
Bonus:
- náhodný barevný šum:
return 'rgb('+ 255*Math.random() +','+ 100*Math.random() +','+ 100*Math.random() +')'`