HTML5 Canvas
Cvičení 6
Z8144 Počítačová grafika v kartografii
Jaro 2019
Šimon Leitgeb
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Ukázky HTML Canvas
Definice 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
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Ukázky HTML Canvas
Definice Canvas
Definice Canvas
<canvas width="250" height="120" id="draw"></canvas>
const DRAW_CANVAS = document.getElementById("draw");
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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);
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
.getContext("2d")? A co 3d?
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Obdélníky
Barvy – fill, stroke
Clear
Reference
.getContext("2d")? A co 3d? → WebGL
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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 …
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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)
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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í.
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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);
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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);
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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);
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
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
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
Canvas Path
fill()
stroke()
beginPath()
moveTo()
closePath()
lineTo()
clip()
quadraticCurveTo()
bezierCurveTo()
arc()
arcTo()
isPointInPath()
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
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();
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
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();
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
beginPath
Kruh
1. úkol
1. úkol
Nakreslete sněhuláka v canvas.
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
Korektní detekce myši
Korektní detekce myši 2
2. úkol
2. úkol – bonus
Click eventy
const DRAW_CANVAS = document.getElementById("draw");
DRAW_CANVAS.addEventListener('click', function(evt) {
const CX = evt.pageX;
const CY = evt.pageY;
const CANVAS_BOX = DRAW_CANVAS.getBoundingClientRect();
const RX = CX - CANVAS_BOX.left;
const RY = CY - CANVAS_BOX.top;
alert("CX:" + CX + ", CY:" + CY + " | " + "RX:" + RX + ", RY:" +
RY);→
}, false);
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
Korektní detekce myši
Korektní detekce myši 2
2. úkol
2. úkol – bonus
Korektní detekce myši
viz http://www.quirksmode.org/js/events_properties.html#position
function doSomething(e) {
let posx = 0;
let posy = 0;
if (!e) let e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the
document→
}
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
Korektní detekce myši
Korektní detekce myši 2
2. úkol
2. úkol – bonus
Korektní detekce myši 2
function doSomething(e) {
…
// posx and posy contain the mouse position relative to the
document→
const CANVAS_BOX =
document.getElementById("draw").getBoundingClientRect();→
const C_POSX = CANVAS_BOX.left + document.body.scrollLeft
+ document.documentElement.scrollLeft;
const C_POSY = CANVAS_BOX.top + document.body.scrollTop
+ document.documentElement.scrollTop;
const RELATIVE_X = POSX - C_POSX;
const RELATIVE_Y = POSY - C_POSY;
alert(RELATIVE_X + " " + RELATIVE_Y);
}
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
Korektní detekce myši
Korektní detekce myši 2
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
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
Click eventy
Korektní detekce myši
Korektní detekce myši 2
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
Šimon Leitgeb HTML5 Canvas
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základy Canvas
Kreslení Canvas
Canvas Path
Interaktivita v Canvas
Domácí úkol
3. úkol
3. úkol
Vytvořte 2 verze hry “Tic Tac Toe”
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 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í, 17. konzultační hodina
možno získat až 60 bodů
úkol odevzdávejte jako jeden HTML soubor nebo archiv .zip
24. 4. JS knihovny, 15. 5. animace?
Šimon Leitgeb HTML5 Canvas
Díky za pozornost!
https://discord.gg/UHTPUDU
. . . . . . . . . . . . . . . . . . . .