Kreslíme do webu Canvas
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
Počítačová grafika Bitmapová grafika Obraz je tvořen maticí barevných bodů
Počítačová grafika Bitmapová grafika při změně velikosti dochází k degradaci obrazu
Počítačová grafika Bitmapová grafika Degradace je nevratná: zmenšením ztratíme data...
Počítačová grafika Bitmapová grafika...po opětovném zvětšení je obraz nekvalitní.
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.
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...)
Počítačová grafika Vektorová grafika při změně velikosti zůstává obraz stále stejně kvalitní
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
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?
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
Canvas V JS získáme nejprve objekt pro manipulaci s tímto elementem: var elem = document.getelementbyid('mycanvas'); if (elem && elem.getcontext) {... }
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) {... } }
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!
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
Přidáme barvu výplně: Canvas var context = elem.getcontext('2d'); if (context) { context.fillstyle = "#0000FF"; context.fillrect(0, 0, 150, 100); }
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); }
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); }
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
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
Hranatý smajlík? Canvas Chceme kulatý!
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
moveto(10, 10) Canvas lineto(100, 10) lineto(10, 40)
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()
Canvas context.beginpath(); context.moveto(10, 10); context.lineto(100, 10); context.lineto(10, 100); context.fill(); context.stroke(); context.closepath(); canvas5.html
Canvas Co ten kruh? "Circle" není, ale je oblouk (arc) arc(x, y, poloměr, počáteční úhel, koncový úhel, směr)
Canvas arc (50, 50, 40, 0, 1, false); arc (50, 50, 40, 0, 2, false); arc (50, 50, 40, 0, 3.1415, false); Math.PI arc (50, 50, 40, 0, 2*Math.PI, false);
Canvas Křivky quadraticcurveto (cx, cy, x, y) beziercurveto (c1x, c1y, c2x, c2y, x, y)
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
Všechno dohromady... Canvas canvas7.html