HTML5 Canvas
Cvičení 6
Z8144 Počítačová grafika v kartografii
Jaro 2020
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Rozvrh
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Ukázky HTML Canvas
Ukázky HTML Canvas
Ukázky HTML Canvas
http://www.effectgames.com/demos/canvascycle/
http://www.sinuousgame.com/
https://lab.hakim.se/trail/03/
http://kennethjorgensen.com/blog/2014/canvas-trees –
zmáčkněte F5
https://mario5.florian-rappl.de/#menu
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Ukázky HTML Canvas
Ukázky HTML Canvas
Mapy taktiež
https://openlayers.org/
https://leafletjs.com/
...
https://www.google.sk/maps
...
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Definice Canvas
CANVAS vs SVG. Kde je rozdiel
CANVAS slúži na vykresľovanie rastrovej grafiky(bitmapa)
Obsah je menej flexibilný - je nutné počítať s rozlíšením pre
dosiahnutie dobrej kvality
Nepodporuje event handlery na úrovni elementov (po
vykreslená v podstate nevieme čo a kam sme vykreslili)
Je vhodnejší (rýchlejší) na prácu s väčším množstvom elemntov
Obsah je možné meniť len pomocou skriptu
Obsah je možné exportovať ako png alebo jpeg
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Definice Canvas
Definice Canvas
const DRAW_CANVAS = document.getElementById("draw");
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Kreslení Canvas
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
DRAW_CONTEXT.fillRect(25, 25, 200, 60);
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
.getContext("2d")? A co 3d?
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
.getContext("2d")? A co 3d? → WebGL
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
.getContext("2d")? A co 3d? → WebGL
Trochu jiný vesmír …
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Obdélníky
DRAW_CONTEXT.rect(x, y, width, height)
DRAW_CONTEXT.fillRect(x, y, width, height)
DRAW_CONTEXT.strokeRect(x, y, width, height)
DRAW_CONTEXT.clearRect(x, y, width, height)
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Barvy – fill, stroke
DRAW_CONTEXT.fillStyle = "#rrggbb";
DRAW_CONTEXT.strokeStyle = "#rrggbb";
Nastaví barvy pro další kreslení.
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Fill – příklad
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
DRAW_CONTEXT.fillStyle = "#ff0000";
DRAW_CONTEXT.fillRect(25, 25, 200, 60);
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Stroke – příklad
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
DRAW_CONTEXT.strokeStyle = "#00ff00";
DRAW_CONTEXT.strokeRect(25, 25, 200, 60);
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Clear
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
DRAW_CONTEXT.fillStyle = "#ff0000";
DRAW_CONTEXT.fillRect(25, 25, 200, 60);
DRAW_CONTEXT.clearRect(50, 50, 75, 75);
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
Reference
http://www.w3schools.com/tags/ref_canvas.asp
http://diveintohtml5.info/canvas.html
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
Canvas Path
fill()
stroke()
beginPath()
moveTo()
closePath()
lineTo()
clip()
quadraticCurveTo()
bezierCurveTo()
arc()
arcTo()
isPointInPath()
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
beginPath
https://www.w3schools.com/tags/canvas_beginpath.asp
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
DRAW_CONTEXT.beginPath();
DRAW_CONTEXT.lineWidth="5";
DRAW_CONTEXT.strokeStyle="green";
DRAW_CONTEXT.moveTo(0,75);
DRAW_CONTEXT.lineTo(200,75);
DRAW_CONTEXT.stroke();
DRAW_CONTEXT.beginPath();
DRAW_CONTEXT.strokeStyle="purple";
DRAW_CONTEXT.moveTo(50,0);
DRAW_CONTEXT.lineTo(50,110);
DRAW_CONTEXT.stroke();
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
Kruh
const DRAW_CANVAS = document.getElementById("draw");
const DRAW_CONTEXT = DRAW_CANVAS.getContext("2d");
const CX = DRAW_CANVAS.width / 2;
const CY = DRAW_CANVAS.height / 2;
const R = 70;
DRAW_CONTEXT.beginPath();
DRAW_CONTEXT.arc(CX, CY, R, 0, 2 * Math.PI, false);
DRAW_CONTEXT.lineWidth = 3;
DRAW_CONTEXT.strokeStyle = '#000000';
DRAW_CONTEXT.stroke();
DRAW_CONTEXT.fillStyle = 'green';
DRAW_CONTEXT.fill();
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
1. úkol
Nakreslete sněhuláka v canvas.
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
1. úkol - ukážka riešenia
https://gist.github.com/FilipLeitner/
9aae1ade55e3c3c5a6e94aa57bb23cab
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
2. úkol
2. úkol
2. úkol – bonus
Click eventy
Bez nadstavieb napríklad v podobe knižnice možné len na úrovni canvas containeru
const DRAW_CANVAS = document.getElementById("draw");
DRAW_CANVAS.addEventListener('click', function(evt) {
^^Ialert(`${evt.offsetX} ${evt.offsetY}`);
});
Pokud byste potřebovali podporovat starší prohlížeče, dopručuji tento návod:
http://www.quirksmode.org/js/events_properties.html#position
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
2. úkol
2. úkol
2. úkol – bonus
2. úkol
V canvas vytvořte bílou plochu
Po kliknutí do plochy se v ní objeví červený kruh s
orámováním na pozici myši
Odevzdejte do týdne (4. 5. 4:00) do odevzdávárny
„Cvičenie 5 – priebežné“
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
2. úkol
2. úkol
2. úkol – bonus
2. úkol - tipy
Ak sa súradnice canvasu nezačínajú v rovnakom bode ako
súrdanice dokumetu odsadenie získate pomocu:
const CANVAS_BOX =
CANVAS.getBoundingClientRect();
Ak chcete zmeniť, už vykreslené elementy je nutné kompletné
prekreslenie
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
2. úkol
2. úkol
2. úkol – bonus
2. úkol – bonus
V canvas vytvořte bílou plochu
Po kliknutí do plochy se v ní objeví červený kruh s
orámováním na pozici myši
V ploše zůstane zobrazeno maximálně 5 kruhů, starší
budou postupně blednout
Filip Leitner HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Základy Canvas
CANVAS vs SVG
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
3. úkol
3. úkol
Vytvořte 2 verze hry “Tic Tac Toe” (piškvorky 3x3)
Jedna z těchto verzí bude v SVG (+JS) a druhá v HTML5 canvas
(+JS)
Pravidla viz http://en.wikipedia.org/wiki/Tic-tac-toe
Hra rozpozná konec a zobrazí výsledek: výhra O, výhra X, remíza
Hra nemusí obsahovat „umělou inteligenci“. V tomto případě se
„hráči“ střídají. (Jednou po kliknutí křížek, jednou kolečko).
Použijte co nejvíce společného JS kódu.
3 týdny na vypracování – 16. 5. 4:00
možno získat až 60 bodů
úkol odevzdávejte jako archiv .zip
Filip Leitner HTML5 Canvas
Díky za pozornost!
. . . . . . . . . . . . . . . . . . . .