Canvas
Kreslíme do webu
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:
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
Canvas Přidáme barvu výplně: 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); }
Canvas Spojíme vše dohromady 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
Canvas Vida! A co třeba toto? 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
Canvas Hranatý smajlík?
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
Canvas Všechno dohromady...
canvas7.html
