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