Kreslíme do webu. Canvas

Rozměr: px
Začít zobrazení ze stránky:

Download "Kreslíme do webu. Canvas"

Transkript

1 Kreslíme do webu Canvas

2 Počítačová grafika Bitmapy vs Vektory Bitmapy: - obraz je složen z bodů (pixelů), které mají definované vlastnosti Vektory: - obraz je složen z grafických prvků (primitiv), které mají definované vlastnosti

3 Počítačová grafika Bitmapová grafika Obraz je tvořen maticí barevných bodů

4 Počítačová grafika Bitmapová grafika při změně velikosti dochází k degradaci obrazu

5 Počítačová grafika Bitmapová grafika Degradace je nevratná: zmenšením ztratíme data...

6 Počítačová grafika Bitmapová grafika...po opětovném zvětšení je obraz nekvalitní.

7 Počítačová grafika Bitmapová grafika... ALE JE RYCHLÁ! a dobře se s ní pracuje (programátorsky to je "matice bodů" dvojrozměrné pole) Formáty: GIF, PNG, BMP, JPG (ztrátová komprese) Editory: Photoshop, Gimp, Paint.NET atd.

8 Počítačová grafika Vektorová grafika Pracuje s elementy jako je "čára", "elipsa", "obdélník", "křivka", kterým definuje vlastnosti (průhlednost, barvu výplně, barvu obrysu, sílu obrysu...)

9 Počítačová grafika Vektorová grafika při změně velikosti zůstává obraz stále stejně kvalitní

10 Počítačová grafika Vektorová grafika je pomalejší nehodí se pro fotografie, obrazy apod., spíš pro diagramy či kresby, složené z objektů Formáty: SVG, AI, CDR Editory: CorelDRAW, Adobe Illustrator, Inkscape

11 Canvas Bitmapový nástroj HTML5, který umožňuje kreslit přímo do stránky 2D/3D obrazy. Kreslení (manipulace s obrazem) probíhá pomocí JavaScriptu. Jak na to?

12 Canvas Canvas je prostý blokový element: <canvas id="mycanvas" width="300" height="150"> Náhradní obsah pro prohlížeče, které canvas nepodporují. </canvas> canvas1.html

13 Canvas V JS získáme nejprve objekt pro manipulaci s tímto elementem: var elem = document.getelementbyid('mycanvas'); if (elem && elem.getcontext) {... }

14 Canvas... a pak požádáme o kontext tedy o "přístup k canvasu": var elem = document.getelementbyid('mycanvas'); if (elem && elem.getcontext) { var context = elem.getcontext('2d'); if (context) {... } }

15 Canvas Kontext inicializujeme a získáme pomocí getcontext(). Parametr je "2d" nebo "3d", to podle toho, jestli chceme kreslit 2D nebo 3D grafiku. Každý canvas může mít jen jeden kontext!

16 Canvas Máme kontext, tak něco nakreslíme: var context = elem.getcontext('2d'); if (context) { context.fillrect(0, 0, 150, 100); } Kreslí se pomocí metod kontextu. fillrect(x, y, w, h) levý horní roh, výška, šířka canvas2.html

17 Přidáme barvu výplně: Canvas var context = elem.getcontext('2d'); if (context) { context.fillstyle = "#0000FF"; context.fillrect(0, 0, 150, 100); }

18 Canvas Nakreslíme si prázdný obdélník, jen s obrysem nadefinujeme si barvu a tloušťku čáry: var context = elem.getcontext('2d'); if (context) { context.strokestyle = "#FF0000"; context.linewidth = 7; //v pixelech context.strokerect(0, 0, 150, 100); }

19 Canvas Prázdný obdélník ("průhledný") vytvoříme pomocí clearrect: var context = elem.getcontext('2d'); if (context) { context.clearrect(40, 40, 30, 30); }

20 Spojíme vše dohromady Canvas context.fillstyle = "#0000FF"; context.strokestyle = "#FF0000"; context.linewidth = 7; context.fillrect(0, 0, 100, 100); context.strokerect(20, 20, 100, 100); context.clearrect(40, 40, 30, 30); canvas3.html

21 Vida! A co třeba toto? Canvas context.fillstyle = "#FFFF00"; context.strokestyle = "#000000"; context.linewidth = 7; context.fillrect(10, 10, 100, 100); context.strokerect(10, 10, 100, 100); context.fillstyle = "#000000"; context.fillrect(30, 30, 20, 30); context.fillrect(70, 30, 20, 30); context.fillrect(30, 80, 60, 10); canvas4.html

22 Hranatý smajlík? Canvas Chceme kulatý!

23 Canvas Kruh v 2D canvasu není! Překvápko! Máme čáry, křivky a oblouky a můžeme je spojovat. moveto(x,y) přesune pero na zadanou pozici lineto(x,y) nakreslí čáru z poslední pozice na zadanou

24 moveto(10, 10) Canvas lineto(100, 10) lineto(10, 40)

25 Canvas Cesty: začneme beginpath(); pak kreslíme jak potřebujeme na konci zavoláme buď stroke(); nebo fill(); (nebo obojí), čímž vykreslíme obrys / výplň cestu uzavřeme pomocí closepath()

26 Canvas context.beginpath(); context.moveto(10, 10); context.lineto(100, 10); context.lineto(10, 100); context.fill(); context.stroke(); context.closepath(); canvas5.html

27 Canvas Co ten kruh? "Circle" není, ale je oblouk (arc) arc(x, y, poloměr, počáteční úhel, koncový úhel, směr)

28 Canvas arc (50, 50, 40, 0, 1, false); arc (50, 50, 40, 0, 2, false); arc (50, 50, 40, 0, , false); Math.PI arc (50, 50, 40, 0, 2*Math.PI, false);

29 Canvas Křivky quadraticcurveto (cx, cy, x, y) beziercurveto (c1x, c1y, c2x, c2y, x, y)

30 Canvas context.arc(50, 50, 40, 1, 4, false); context.moveto(150,50); context.quadraticcurveto(200,0,250,50); context.moveto(300,10); context.beziercurveto(350,0,250,80, 300, 100); canvas6.html

31 Všechno dohromady... Canvas canvas7.html

novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers

novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers HTML5 1 novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers 2 nové tagy 3 nové tagy 4 nové tagy IE 7, IE 8 nebude

Více

Číslo DUM: VY_32_INOVACE_04_01 Autor: Mgr. Ivana Matyášková Datum vytvoření: březen 2013 Ročník: prima Vzdělávací obor: informační technologie

Číslo DUM: VY_32_INOVACE_04_01 Autor: Mgr. Ivana Matyášková Datum vytvoření: březen 2013 Ročník: prima Vzdělávací obor: informační technologie Číslo DUM: VY_32_INOVACE_04_01 Autor: Mgr. Ivana Matyášková Datum vytvoření: březen 2013 Ročník: prima Vzdělávací obor: informační technologie Tematický celek: počítačová grafika Název projektu: Zvyšování

Více

VY_32_INOVACE_INF4_12. Počítačová grafika. Úvod

VY_32_INOVACE_INF4_12. Počítačová grafika. Úvod VY_32_INOVACE_INF4_12 Počítačová grafika Úvod Základní rozdělení grafických formátů Rastrová grafika (bitmapová) Vektorová grafika Základním prvkem je bod (pixel). Vhodná pro zpracování digitální fotografie.

Více

Tvorba posterů v PowerPointu a InDesignu

Tvorba posterů v PowerPointu a InDesignu Tvorba posterů v PowerPointu a InDesignu Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti zaměstnanců

Více

Identifikátor materiálu: ICT-1-20

Identifikátor materiálu: ICT-1-20 Identifikátor materiálu: ICT-1-20 Předmět Informační a komunikační technologie Téma materiálu Kancelářské balíky a grafické editory Autor Ing. Bohuslav Nepovím Anotace Student si procvičí / osvojí programové

Více

VYUŽITÍ POČÍTAČOVÉ GRAFIKY

VYUŽITÍ POČÍTAČOVÉ GRAFIKY POČÍTAČOVÁ GRAFIKA VYUŽITÍ POČÍTAČOVÉ GRAFIKY ÚPRAVA FOTOGRAFIÍ NAFOCENÉ FOTOGRAFIE Z DIGITÁLNÍHO FOTOAPARÁTU MŮŽEME NEJEN PROHLÍŽET, ALE TAKÉ UPRAVOVAT JAS KONTRAST BAREVNOST OŘÍZNUTÍ ODSTRANĚNÍ ČERVENÝCH

Více

Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO

Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO 1 Základní dělení 3D grafika 2D grafika vektorová rastrová grafika 2/29 Vektorová grafika Jednotlivé objekty jsou tvořeny křivkami Využití: tvorba diagramů,

Více

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT Metodický list k didaktickému materiálu Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět

Více

POČÍTAČOVÁ GRAFIKA. Počítačová grafika 1

POČÍTAČOVÁ GRAFIKA. Počítačová grafika 1 Počítačová grafika 1 POČÍTAČOVÁ GRAFIKA Gymnázium Jiřího Wolkera v Prostějově Výukové materiály z matematiky pro nižší gymnázia Autoři projektu Student na prahu 21. století - využití ICT ve vyučování matematiky

Více

Počítačová grafika. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely

Počítačová grafika. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely Počítačová grafika OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely Vektorová grafika Vektorová grafika Příklad vektorové grafiky Zpět na Obsah Vektorová grafika Vektorový

Více

Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527

Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527 Projekt: Příjemce: Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527 Střední zdravotnická škola a Vyšší odborná škola zdravotnická, Husova 3, 371 60 České Budějovice

Více

www.zlinskedumy.cz Informační a komunikační technologie Inovace výuky prostřednictvím šablon pro SŠ

www.zlinskedumy.cz Informační a komunikační technologie Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing.

Více

Rastrová grafika. Grafický objekt je zaznamenán jednotlivými souřadnicemi bodů v mřížce. pixel ( picture element ) s definovanou barvou

Rastrová grafika. Grafický objekt je zaznamenán jednotlivými souřadnicemi bodů v mřížce. pixel ( picture element ) s definovanou barvou Rastrová grafika Grafický objekt je zaznamenán jednotlivými souřadnicemi bodů v mřížce. pixel ( picture element ) s definovanou barvou Kvalita je určena rozlišením mřížky a barevnou hloubkou (počet bitů

Více

aneb Malířem snadno a rychle

aneb Malířem snadno a rychle MALUJEME V MALOVÁNÍ aneb Malířem snadno a rychle Počítačová grafika nás dnes obklopuje na každém kroku veškeré tiskoviny, noviny, časopisy, knihy, letáky, billboardy apod. už se dnes bez retušování a úprav

Více

Úvod do Adobe Illustrator CS 5

Úvod do Adobe Illustrator CS 5 Úvod do Adobe Illustrator CS 5 Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti zaměstnanců

Více

Grafické editory. Ing. Jan Steringa 2008

Grafické editory. Ing. Jan Steringa 2008 Grafické editory Ing. Jan Steringa 2008 Grafický editor aplikace určená pro tvorbu nebo úpravu grafických dat (obrázky, výkresy) rozdělení grafických editorů vektorové rastrové jednoúčelové komplexní pro

Více

Tvorba posterů prakticky

Tvorba posterů prakticky Tvorba posterů prakticky Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti zaměstnanců vybraných

Více

Co je to DTP. Albrechtova střední škola, Český Těšín, p.o. Označení materiálu (přílohy):

Co je to DTP. Albrechtova střední škola, Český Těšín, p.o. Označení materiálu (přílohy): Číslo projektu: Název projektu: Subjekt: Označení materiálu (přílohy): CZ.1.07/1.1.24/02.0118 Polygrafie v praxi Albrechtova střední škola, Český Těšín, p.o. Prezentace Co je to Autor: Mgr. MgA. Michal

Více

SMART Notebook verze Aug

SMART Notebook verze Aug SMART Notebook verze 10.6.219.2 Aug 5 2010 Pořadové číslo projektu CZ.1.07/1.4.00/21.3007 Šablona č.: III/2 Datum vytvoření: 11.10.2012 Pro ročník: 7. Vzdělávací obor předmět: Informatika Klíčová slova:

Více

IVT. Grafické formáty. 8. ročník

IVT. Grafické formáty. 8. ročník IVT Grafické formáty 8. ročník listopad, prosinec 2013 Autor: Mgr. Dana Kaprálová Zpracováno v rámci projektu Krok za krokem na ZŠ Želatovská ve 21. století registrační číslo projektu: CZ.1.07/1.4.00/21.3443

Více

Jak namalovat obraz v programu Malování

Jak namalovat obraz v programu Malování Jak namalovat obraz v programu Malování Metodický text doplněný praktickou ukázkou zpracovanou pro možnost promítnutí v prezentačním programu MS PowerPoint PaedDr. Hana Horská 20. 7. 2006 MALOVÁNÍ aplikace,

Více

Jak namalovat obraz v programu Malování

Jak namalovat obraz v programu Malování Jak namalovat obraz v programu Malování Metodický text doplněný praktickou ukázkou zpracovanou pro moţnost promítnutí v prezentačním programu MS PowerPoint PaedDr. Hana Horská 20. 7. 2006, aktualizováno

Více

Základy počítačové grafiky

Základy počítačové grafiky Gymnázium Petra Bezruče, příspěvková organizace Vrchlického, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 Základy počítačové grafiky Metodický

Více

SPECIALISTÉ NA REKLAMNÍ PŘEDMĚTY DTP MANUÁL. eshop.silicmedia.cz

SPECIALISTÉ NA REKLAMNÍ PŘEDMĚTY DTP MANUÁL. eshop.silicmedia.cz SPECIALISTÉ NA REKLAMNÍ PŘEDMĚTY DTP MANUÁL DTP MANUÁL Pokud potřebujete dodat grafické podklady pro potisk reklamních předmětů a nevíte, jakým způsobem podklady přesně dodat, postupujte dle tohoto DTP

Více

Digitální grafika. Digitální obraz je reprezentace dvojrozměrného obrazu, který používá binární soustavu (jedničky a nuly).

Digitální grafika. Digitální obraz je reprezentace dvojrozměrného obrazu, který používá binární soustavu (jedničky a nuly). Digitální grafika Digitální obraz je reprezentace dvojrozměrného obrazu, který používá binární soustavu (jedničky a nuly). Grafika v počítači Matematický popis (přímka, křivka) Rastrový popis (síť, rastr)

Více

Rozdìlení poèítaèové grafiky

Rozdìlení poèítaèové grafiky Rozdìlení poèítaèové grafiky» vektorová grafika» bitmapová grafika» 3D grafika» grafika pro prezentaci» návrh grafických uživatelských rozhraní Vektorová grafika základním prvkem vektorové grafiky je objekt

Více

Práce s plátnem. Vrácení se o krok zpět CTRL+Z Vrácení se o krok vpřed SHIFT+CTRL+Z Duplikace objektu CTRL+D

Práce s plátnem. Vrácení se o krok zpět CTRL+Z Vrácení se o krok vpřed SHIFT+CTRL+Z Duplikace objektu CTRL+D INKSCAPE - Základy Tato prezentace se vám bude snažit přiblížit základy práce s vektorovou grafikou, v našem případě v programu Inkscape. Ukážeme si navigaci na plátně, práci s objekty, výplní, seskupováním

Více

Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

Výukový materiál vytvořen v rámci projektu EU peníze školám Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585 Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

Více

Technologie SVG a HTML5 objekt Canvas jako perspektivní metody vkládání dynamické grafiky do www stránek SVG technology and HTML5 Canvas object as

Technologie SVG a HTML5 objekt Canvas jako perspektivní metody vkládání dynamické grafiky do www stránek SVG technology and HTML5 Canvas object as Technologie SVG a HTML5 objekt Canvas jako perspektivní metody vkládání dynamické grafiky do www stránek SVG technology and HTML5 Canvas object as perspective methods for inserting dynamic graphics into

Více

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT Metodický list k didaktickému materiálu Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět

Více

Základy práce v programovém balíku Corel

Základy práce v programovém balíku Corel Základy práce v programovém balíku Corel Mgr. Tomáš Pešina Výukový text vytvořený v rámci projektu DOPLNIT První jazyková základní škola v Praze 4, Horáčkova 1100, 140 00 Praha 4 - Krč Základy počítačové

Více

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

INFORMATIKA. Grafické studio ve škole

INFORMATIKA. Grafické studio ve škole INFORMATIKA Grafické studio ve škole LUKÁŠ RACHŮNEK Přírodovědecká fakulta UP, Olomouc V současné době školy všech typů často potřebují grafické práce. Jedná se například o prezentaci školy ve formě brožur,

Více

INFORMATIKA PRO ZŠ. Ing. Veronika Šolcová

INFORMATIKA PRO ZŠ. Ing. Veronika Šolcová INFORMATIKA PRO ZŠ 2 Ing. Veronika Šolcová 6. 7. 2016 1 Anotace: 1. Nástroje I 2. Ukládání dokumentu 3. Otevírání dokumentu 4. Nový dokument 5. Nástroje II 6. Nástroje III 7. Kopírování 8. Mazání 9. Text

Více

Počítačová grafika. (Computer Graphics) Úvod do tématu. Martina Mudrová únor 2007

Počítačová grafika. (Computer Graphics) Úvod do tématu. Martina Mudrová únor 2007 Počítačová grafika (Computer Graphics) Úvod do tématu Martina Mudrová únor 2007 Úvod do PG MOTTO:...70% informací přijímáme zrakem... Co zahrnuje pojem počítačová grafika? grafos (řec.)= písmeno = zpracování

Více

GRAFICKÉ FORMÁTY V BITMAPOVÉ GRAFICE

GRAFICKÉ FORMÁTY V BITMAPOVÉ GRAFICE GRAFICKÉ FORMÁTY V BITMAPOVÉ GRAFICE U057 Zoner Photo Studio editace fotografie 2 BAREVNÁ HLOUBKA pixel základní jednotka obrazu bit: ve výpočetní technice nejmenší jednotka informace hodnota 0 nebo 1

Více

Knihovna CanvasLib TXV 003 89 první vydání prosinec 2014 změny vyhrazeny

Knihovna CanvasLib TXV 003 89 první vydání prosinec 2014 změny vyhrazeny Knihovna CanvasLib TXV 003 89 první vydání prosinec 2014 změny vyhrazeny 1 TXV 003 89.01 Historie změn Datum Vydání Popis změn Prosinec 2014 1 První vydání, popis odpovídá CanvasLib_v16 2 TXV 003 89.01

Více

Téma: Práce se základními objekty, výplní a obrysem

Téma: Práce se základními objekty, výplní a obrysem Téma: Práce se základními objekty, výplní a obrysem Vypracovala: Ing. Jana Wasserbauerová TE NTO PR OJ E KT J E S POLUFINANC OVÁN EVR OPS KÝ M S OC IÁLNÍM FONDEM A STÁTNÍM ROZPOČTEM ČESKÉ REPUBLIKY. Cíl:

Více

Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost

Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost Projekt je realizován v rámci Operačního programu Vzdělávání pro konkurence

Více

Grafika a grafický design. Internetové publikování

Grafika a grafický design. Internetové publikování Grafika a grafický design Internetové publikování Design stránky Grafický design první dojem, rychlost stahování Struktura stránek navigace, rozvržení plochy Volba informací okruh čtenářů Syntaktická správnost,

Více

VY_32_INOVACE_INF.19. Inkscape, GIMP, Blender

VY_32_INOVACE_INF.19. Inkscape, GIMP, Blender VY_32_INOVACE_INF.19 Inkscape, GIMP, Blender Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jiří Kalous Základní a mateřská škola Bělá nad Radbuzou, 2011 INKSCAPE Inkscape je open source

Více

Elektromagnetické záření. Zdroj: http://www.fotografovani.cz/images3/rom_svetlo_1_02.gif

Elektromagnetické záření. Zdroj: http://www.fotografovani.cz/images3/rom_svetlo_1_02.gif Počítačová grafika Elektromagnetické záření Zdroj: http://www.fotografovani.cz/images3/rom_svetlo_1_02.gif Jak vidíme Naše oči vnímají elektromagnetické záření Jsou citlivé na vlnové délky 390 až 800 nm

Více

Vektory a web. Základy práce s vektory. Rozvržení dokumentu

Vektory a web. Základy práce s vektory. Rozvržení dokumentu může evokovat jednoduché zobrazení sestávající ze základních geometrických tvarů a křivek. Pravda je ovšem taková, že pomocí vektorů lze vytvořit i velmi komplikované nebo realistické kresby. Mezi nejrozšířenější

Více

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ OBOR GEODÉZIE A KARTOGRAFIE KATEDRA MAPOVÁNÍ A KARTOGRAFIE. Systém Inkscape.

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ OBOR GEODÉZIE A KARTOGRAFIE KATEDRA MAPOVÁNÍ A KARTOGRAFIE. Systém Inkscape. ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ OBOR GEODÉZIE A KARTOGRAFIE KATEDRA MAPOVÁNÍ A KARTOGRAFIE Systém Inkscape semestrální práce Martin Hanzl Pavel Filípek Editor: Radka Junová V Praze

Více

Referát GRAFICKÉ EDITORY

Referát GRAFICKÉ EDITORY Eliška Kokošková 8. B 1 1 Grafické editory Grafické editory jsou programy pro tvorbu vektorové či bitmapové (rastrové) grafiky. Upravují se s nimi grafická data neboli obrázky či fotky. Ukázka grafické

Více

SOŠ Benešov, Černoleská 1997

SOŠ Benešov, Černoleská 1997 SOŠ Benešov, Černoleská 1997 Informační a komunikační technologie Počítačová grafika a multimédia Mgr. Markéta Doušová Bitmapová a vektorová grafika III/2 VY_32_INOVACE_21 Název školy Střední odborná škola,

Více

Počítačová grafika 1. Úvod do grafiky, základní pojmy. Rastrová grafika.

Počítačová grafika 1. Úvod do grafiky, základní pojmy. Rastrová grafika. Počítačová grafika 1 Úvod do grafiky, základní pojmy. Rastrová grafika. Proč vůbec grafika? Zmrzlinový pohár s převažující červenou barvou. Základem je jahodová zmrzlina, která se nachází ve spodní části

Více

DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ

DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ DATOVÉ FORMÁTY GRAFIKY, JEJICH SPECIFIKA A MOŽNOSTI VYUŽITÍ UMT Tomáš Zajíc, David Svoboda Typy počítačové grafiky Rastrová Vektorová Rastrová grafika Pixely Rozlišení Barevná hloubka Monitor 72 PPI Tiskárna

Více

Obsah. Úvod... 9. Barevná kompozice... 16 Světlo... 18 Chromatická teplota světla... 19 Vyvážení bílé barvy... 20

Obsah. Úvod... 9. Barevná kompozice... 16 Světlo... 18 Chromatická teplota světla... 19 Vyvážení bílé barvy... 20 Obsah Úvod.............................................................................................. 9 Historie grafického designu a tisku..................................... 10 Od zadání k návrhu..............................................................

Více

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 3 VY 32 INOVACE 0101 0203

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 3 VY 32 INOVACE 0101 0203 Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 3 VY 32 INOVACE 0101 0203 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor

Více

SW pro převod mezi rastrovou a vektorovou grafikou

SW pro převod mezi rastrovou a vektorovou grafikou SW pro převod mezi rastrovou a vektorovou grafikou Autor: Jakub Houžvička Datum odevzdání: 15.11.2009 Studijní obor: Aplikovaná informatika Předmět: Počítačová grafika v IS aplikacích Obsah 1. Úvod...

Více

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu Číslo projektu Název školy Autor Název šablony Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing. Alois Kužela

Více

VY_32_INOVACE_INF.10. Grafika v IT

VY_32_INOVACE_INF.10. Grafika v IT VY_32_INOVACE_INF.10 Grafika v IT Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jiří Kalous Základní a mateřská škola Bělá nad Radbuzou, 2011 GRAFIKA Grafika ve smyslu umělecké grafiky

Více

Úvod do počítačové grafiky

Úvod do počítačové grafiky Úvod do počítačové grafiky Zpracoval: ing. Jaroslav Chlubný Počítačová grafika Počítačová grafika a digitální fotografie zaujímá v současnosti stále významnější místo v našem životě. Uveďme si jen několik

Více

Grafický software ve výuce a pro výuku

Grafický software ve výuce a pro výuku Grafický software ve výuce a pro výuku Software v prostředí školy Výběr softwaru Cena a licence Kompatibilita Platforma Podpora souborových formátů, sdílení Účel: výuka Počítačová grafika Výuka počítačové

Více

2 Grafický výstup s využitím knihovny

2 Grafický výstup s využitím knihovny 2 Grafický výstup s využitím knihovny Studijní cíl Tento blok je věnován základním principům při vytváření grafického výstupu pomocí standardních metod, které poskytuje grafické rozhraní. V textu budou

Více

IVT. Rastrová grafika. 8. ročník

IVT. Rastrová grafika. 8. ročník IVT Rastrová grafika 8. ročník listopad, prosinec 2013 Autor: Mgr. Dana Kaprálová Zpracováno v rámci projektu Krok za krokem na ZŠ Želatovská ve 21. století registrační číslo projektu: CZ.1.07/1.4.00/21.3443

Více

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery

Funkce grafiky na webu. Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Grafika pro web Funkce grafiky na webu Primární grafická informace Fotografie Schémata Diagramy Loga Bannery Funkce grafiky na webu Sekundární grafická informace Dekorace Zvýraznění Šipky Oddělovače Funkce

Více

GYMNÁZIUM, VLAŠIM, TYLOVA

GYMNÁZIUM, VLAŠIM, TYLOVA GYMNÁZIUM, VLAŠIM, TYLOVA Autor Číslo materiálu Ing. Marta Bechyňová 2_1_INF_15 Datum vytvoření 10. 11. 2012 Druh učebního materiálu manuál Ročník 2. manuál pro práci s maskou v rastrovém Anotace grafickém

Více

Kde se používá počítačová grafika

Kde se používá počítačová grafika POČÍTAČOVÁ GRAFIKA Kde se používá počítačová grafika Tiskoviny Reklama Média, televize, film Multimédia Internetové stránky 3D grafika Virtuální realita CAD / CAM projektování Hry Základní pojmy Rastrová

Více

Práce s obrazovým materiálem CENTRUM MEDIÁLNÍHO VZDĚLÁVÁNÍ. Akreditované středisko dalšího vzdělávání pedagogických pracovníků

Práce s obrazovým materiálem CENTRUM MEDIÁLNÍHO VZDĚLÁVÁNÍ. Akreditované středisko dalšího vzdělávání pedagogických pracovníků Práce s obrazovým materiálem CENTRUM MEDIÁLNÍHO VZDĚLÁVÁNÍ Akreditované středisko dalšího vzdělávání pedagogických pracovníků Obrazový materiál příjemná součást prezentace lépe zapamatovatelný často nahrazení

Více

Digitální učební materiál

Digitální učební materiál Střední hotelová škola, s.r.o. Floriánské náměstí 350, 272 01 Kladno Digitální učební materiál Číslo projektu Název projektu Název školy Předmět Tematický okruh Téma CZ.1.07/1.5.00/34.0112 Moderní škola

Více

Kde se používá počítačová grafika (PG)?

Kde se používá počítačová grafika (PG)? Počítačová grafika Kde se používá počítačová grafika (PG)? Tiskoviny - časopisy, noviny, letáky Reklama billboardy, propagační mat., reklamní spoty Média, televize, film titulky, efekty, triky Multimédia

Více

AUDIOVIZUÁLNÍ PROSTŘEDKY 1

AUDIOVIZUÁLNÍ PROSTŘEDKY 1 AUDIOVIZUÁLNÍ PROSTŘEDKY 1 ALEŠ OUJEZDSKÝ CZ.1.07/2.2.00/29.0006 OSTRAVA, ZÁŘÍ 2013 Studijní opora je jedním z výstupu projektu ESF OP VK. Číslo Prioritní osy: 7.2 Oblast podpory: 7.2.2 Vysokoškolské vzdělávání

Více

(22) Počítačová grafika

(22) Počítačová grafika (22) Počítačová grafika 1. Převod rozměrů na palce 1. 1 palec = 2,54 cm 1. 10 cm = 3,937 palce 2. 6 cm = 2,3622 palce 2. Výpočet počtu bodů (300 DPI) 1. Každý palec 300 bodů 1. 3,937 palců * 300 = 1181

Více

Barvy a barevné systémy Formáty obrázků pro WWW

Barvy a barevné systémy Formáty obrázků pro WWW Barvy a barevné systémy Formáty obrázků pro WWW Viditelné světlo. Elektromagnetické záření o vlnové délce 390 760 nanometrů. Jsou-li v konkrétním světle zastoupeny složky všech vlnových délek, vnímáme

Více

Ot. 8. Vektorová grafika

Ot. 8. Vektorová grafika Ot. 8. Vektorová grafika Základní popis Druhou velkou oblastí zpracování obrazu pomocí počítače kromě rastrové grafiky je vektorová grafika. Vektorový způsob zpracování obrazu je výrazně odlišný od zpracování

Více

Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/

Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/ Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/ Bitmapový formát (rastrový obrázek) Většina z používaných grafických formátů (JPEG, PNG, TGA, BMP) obsahuje popis rastrového obrázku jako celku ukládají

Více

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Gymnázium Jana Pivečky a Střední odborná škola Slavičín. III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748 Gymnázium Jana Pivečky a Střední odborná škola Slavičín Ing.

Více

. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu.

. Grafika a plovoucí prostředí. Zpracování textů na počítači. Ing. Pavel Haluza, Ph.D. ústav informatiky PEF MENDELU v Brně haluza@mendelu. Grafika a plovoucí prostředí Zpracování textů na počítači Ing Pavel Haluza, PhD ústav informatiky PEF MENDELU v Brně haluza@mendelucz Kreslení vektorových obrazů Příklad \unitlength=1mm \begin{picture}(50,30)(10,20)

Více

Využití ICT techniky především v uměleckém vzdělávání. Akademie - VOŠ, Gymn. a SOŠUP Světlá nad Sázavou

Využití ICT techniky především v uměleckém vzdělávání. Akademie - VOŠ, Gymn. a SOŠUP Světlá nad Sázavou Datum: 1. 12. 2013 Projekt: Registrační číslo: Číslo DUM: Škola: Jméno autora: Název sady: Název práce: Předmět: Ročník: Obor: Časová dotace: Vzdělávací cíl: Pomůcky: Využití ICT techniky především v uměleckém

Více

Plnohodnotné kreslení

Plnohodnotné kreslení Plnohodnotné kreslení KAPITOLA 6 V této kapitole: Odbočka (terminologická): Yak Shaving HTML Klíčové slovo this a pseudoprivátní vlastnosti Příprava canvasu a mřížka Buňky a atomy v nich Ostatní

Více

Úvod do počítačové grafiky

Úvod do počítačové grafiky Úvod do počítačové grafiky elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev

Více

Formáty pro rastrovou grafiku

Formáty pro rastrovou grafiku Semestrální práce z předmětu Kartografická polygrafie a reprografie Formáty pro rastrovou grafiku Autor: Linda Křikavová, Ondřej Vala Editor: Miroslav Ott Praha, březen 2011 Katedra mapování a kartografie

Více

Cvičení 7: Delphi objekty CheckedBox, Radio- Button, EditBox

Cvičení 7: Delphi objekty CheckedBox, Radio- Button, EditBox Cvičení 7: Delphi objekty CheckedBox, Radio- Button, EditBox 1 Opakování kreslení do Image 1. Canvas = plátno - Color, Caption Nastavení typu čáry pro kreslení perem Pen: barva Image1.Canvas.Pen.Color

Více

Barvy a barevné systémy Formáty obrázků pro WWW

Barvy a barevné systémy Formáty obrázků pro WWW Barvy a barevné systémy Formáty obrázků pro WWW Viditelné světlo. Elektromagnetické záření o vlnové délce 390 760 nanometrů. Jsou-li v konkrétním světle zastoupeny složky všech vlnových délek, vnímáme

Více

Vstupní požadavky, doporučení a metodické pokyny

Vstupní požadavky, doporučení a metodické pokyny Název modulu: Grafika v OSS/FS Označení: B5 Stručná charakteristika modulu Modul je orientován na tvorbu a zpracování rastrové a vektorové grafiky v prostředí otevřeného a svobodného software. Zahrnuje

Více

Produktové documenty (30.09.2015) Přehled funkcí a vlastností programu pcon.planner 7.2

Produktové documenty (30.09.2015) Přehled funkcí a vlastností programu pcon.planner 7.2 Produktové documenty (30.09.2015) Přehled funkcí a vlastností programu pcon.planner 7.2 Formáty Nahrávání a ukládání souborů DWG a DWT Převod a podpora starších DWG formátů Rozšířená podpora šablon včetně

Více

Grafika a grafický design. Internetové publikování

Grafika a grafický design. Internetové publikování Grafika a grafický design Internetové publikování Design stránky Grafický design první dojem, rychlost stahování Struktura stránek navigace, rozvržení plochy Volba informací okruh čtenářů Syntaktická správnost,

Více

Vzdělávání a podpora pedagogických pracovníků ZŠ a SŠ při integraci ICT do výuky POČÍTAČOVÁ GRAFIKA - 1 -

Vzdělávání a podpora pedagogických pracovníků ZŠ a SŠ při integraci ICT do výuky POČÍTAČOVÁ GRAFIKA - 1 - POČÍTAČOVÁ GRAFIKA B1 POČÍTAČOVÁ GRAFIKA RNDr. Jan Preclík, Ph.D. 2. 1. 2015-1 - Obsah Počítačová grafika úvod................................ 3 Zoner Callisto 5...................................... 6

Více

DUM 02 téma: Formáty souborů rastrové grafiky

DUM 02 téma: Formáty souborů rastrové grafiky DUM 02 téma: Formáty souborů rastrové grafiky ze sady: 02 tematický okruh sady: Bitmapová grafika ze šablony: 09 Počítačová grafika určeno pro: 2. ročník vzdělávací obor: vzdělávací oblast: číslo projektu:

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT

Více

Aplikovaná informatika Zajištění optimální konverze grafických informací v prostředí vybraného software ZEMÁNEK, Z. PLUSKAL, D. ŠUBRT, Z.

Aplikovaná informatika Zajištění optimální konverze grafických informací v prostředí vybraného software ZEMÁNEK, Z. PLUSKAL, D. ŠUBRT, Z. Aplikovaná informatika Zajištění optimální konverze grafických informací v prostředí vybraného software ZEMÁNEK, Z. PLUSKAL, D. ŠUBRT, Z. Operační program Vzdělávání pro konkurenceschopnost Název projektu:

Více

Produktové Dokumenty (Datum 28.11.2014) Srovnání verzí: pcon.planner 7.0 Rozdíly mezi verzemi Standard-, ME a PRO

Produktové Dokumenty (Datum 28.11.2014) Srovnání verzí: pcon.planner 7.0 Rozdíly mezi verzemi Standard-, ME a PRO Produktové Dokumenty (Datum 28.11.2014) Srovnání verzí: pcon.planner 7.0 Rozdíly mezi verzemi Standard-, ME a PRO Základní formáty STD ME PRO Nahrávání a ukládání souborů DWG a DWT Převod a podpora starších

Více

POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ

POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ POČÍTAČOVÁ GRAFIKA VEKTOROVÁ GRAFIKA VÍCENÁSOBNÉ KOPÍROVÁNÍ VÍCENÁSOBNÉ KOPÍROVÁNÍ Kopírování jednoho prvku je častá činnost v mnoha editorech. Vícenásobné kopírování znamená opakování jednoho prvku v

Více

1. ZÁKLADNÍ POJMY POČÍTAČOVÉ GRAFIKY

1. ZÁKLADNÍ POJMY POČÍTAČOVÉ GRAFIKY 1. ZÁKLADNÍ POJMY POČÍTAČOVÉ GRAFIKY Pixel: je zkratka anglického PICture Element, tedy obrazový bod. Velikost obrázku: na monitoru v obrazových bodech - počet obrazových bodů, ze kterých je obrázek sestaven

Více

POČÍTAČOVÁ GRAFIKA. Lenka Bednaříková

POČÍTAČOVÁ GRAFIKA. Lenka Bednaříková POČÍTAČOVÁ GRAFIKA Lenka Bednaříková POČÍTAČOVÁ GRAFIKA - OBSAH Barevné modely Základní dělení počítačové grafiky Vektorová grafika Rastrová (bitmapová) grafika Rozlišení Barevná hloubka Komprese, komprimace

Více

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT Metodický list k didaktickému materiálu Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět

Více

Vektorový formát SVG

Vektorový formát SVG Vektorový formát SVG 2015-2016 Josef Pelikán, CGG MFF UK Praha http://cgg.mff.cuni.cz/~pepca/ pepca@cgg.mff.cuni.cz SVG 2016 Josef Pelikán, http://cgg.mff.cuni.cz/~pepca 1 / 17 Zobrazování grafiky v HTML5

Více

Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: 2008-09

Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: 2008-09 Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: 2008-09 Studijní obor: Výpočetní technika a informatika Technologie SVG aktuální standard webové vektorové

Více

Hydroprojekt CZ a.s. WINPLAN systém programů pro projektování vodohospodářských liniových staveb. HYDRONet 3. Modul SITUACE

Hydroprojekt CZ a.s. WINPLAN systém programů pro projektování vodohospodářských liniových staveb. HYDRONet 3. Modul SITUACE Hydroprojekt CZ a.s. systém programů pro projektování vodohospodářských liniových staveb HYDRONet 3 W I N P L A N s y s t é m p r o g r a m ů p r o p r o j e k t o v á n í v o d o h o s p o d á ř s k ý

Více

Gymnázium a Střední odborná škola, Rokycany, Mládežníků 1115

Gymnázium a Střední odborná škola, Rokycany, Mládežníků 1115 Číslo projektu: Gymnázium a Střední odborná škola, Rokycany, Mládežníků 1115 Číslo šablony: 8 Název materiálu: Ročník: Identifikace materiálu: Jméno autora: Předmět: Tématický celek: Anotace: CZ.1.07/1.5.00/34.0410

Více

Jazyk C# (seminář 9)

Jazyk C# (seminář 9) Jazyk C# (seminář 9) Pavel Procházka KMI 19. listopadu 2014 Motivace proč GTK# Moderní přístup k psaní GUI Základ (GTK+) je napsaný v C, ale podporuje celou řadu jazyků (Vala, Python, JavaScript, C#,...

Více

Inovace výuky prostřednictvím šablon pro SŠ

Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748

Více

Grafika vektorová vs. bitmapová

Grafika vektorová vs. bitmapová Vysoká škola ekonomická v Praze Fakulta podnikohospodářská Hlavní specializace: Podniková ekonomika a management Seminář: Manažerská informatika pro pokročilé Semestrální práce: Grafika vektorová vs. bitmapová

Více

Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost

Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost Registrační číslo projektu: CZ.1.07/1.5.00/34.0553 Elektronická podpora zkvalitnění výuky CZ.1.07 Vzděláním pro konkurenceschopnost Projekt je realizován v rámci Operačního programu Vzdělávání pro konkurence

Více

Konverze grafických rastrových formátů

Konverze grafických rastrových formátů ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ OBOR GEODÉZIE A KARTOGRAFIE KATEDRA MAPOVÁNÍ A KARTOGRAFIE Konverze grafických rastrových formátů semestrální práce Jakub Hořejší Ondřej Šalanda V

Více

ŠKOLNÍ VZDĚLÁVACÍ PROGRAM DR. J. PEKAŘE V MLADÉ BOLESLAVI

ŠKOLNÍ VZDĚLÁVACÍ PROGRAM DR. J. PEKAŘE V MLADÉ BOLESLAVI školní vzdělávací program PLACE HERE Název školy Adresa Palackého 211, Mladá Boleslav 293 80 Název ŠVP Platnost 1.9.2009 Dosažené vzdělání Střední vzdělání s maturitní zkouškou Název RVP Délka studia v

Více

Základy graky. Jan Hamá ek. 13. zá í 2016

Základy graky. Jan Hamá ek. 13. zá í 2016 13. zá í 2016 Barevné systémy Jak uloºit efektivn barvu do po íta e? Barevné systémy Jak uloºit efektivn barvu do po íta e?nej ast ji pouºíváme systém RGB - Red, Green, Blue. Barva - trojice ísel (R, G,

Více