Toto je starší verze dokumentu!
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é se náš 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 vrácí(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)
Rozbalte si obrazovka.zip a otevřete html v prohlížeči.
Úkoly - nakreslete:
- kříž - plusko
- do prostředka tabulky, ať je jakkoliv velká
- vodorovné čáry každou pátou linku
- šachovnici (0,0 bílá)
- šachovnici (0,0 černá)
- Vlajku nějakého státu
- vlajku ČR
- 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() +')'`