HTML5 Canvas
Cvičení 6
Z8144 Počítačová grafika v kartografii
Jaro 2022
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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://code.tutsplus.com/articles/
21-ridiculously-impressive-html5-canvas-experiments--net-14210
Filip Leitner HTML5 Canvas Počítačová grafika 2 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Definice Canvas
<canvas width="250" height="120" id="draw"></canvas>
const DRAW_CANVAS = document.getElementById("draw");
Filip Leitner HTML5 Canvas Počítačová grafika 3 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 4 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.getContext("2d")? A co 3d?
Filip Leitner HTML5 Canvas Počítačová grafika 5 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.getContext("2d")? A co 3d? → WebGL
Filip Leitner HTML5 Canvas Počítačová grafika 5 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.getContext("2d")? A co 3d? → WebGL
Trochu jiný vesmír …
Filip Leitner HTML5 Canvas Počítačová grafika 5 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 6 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Barvy – fill, stroke
DRAW_CONTEXT.fillStyle = "#rrggbb";
DRAW_CONTEXT.strokeStyle = "#rrggbb";
Nastaví barvy pro další kreslení.
Filip Leitner HTML5 Canvas Počítačová grafika 7 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 8 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 9 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 10 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Reference
http://www.w3schools.com/tags/ref_canvas.asp
http://diveintohtml5.info/canvas.html
Filip Leitner HTML5 Canvas Počítačová grafika 11 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Canvas Path
fill()
stroke()
beginPath()
moveTo()
closePath()
lineTo()
clip()
quadraticCurveTo()
bezierCurveTo()
arc()
arcTo()
isPointInPath()
Filip Leitner HTML5 Canvas Počítačová grafika 12 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 13 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 Počítačová grafika 14 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1. úkol
Nakreslete sněhuláka v canvas.
Filip Leitner HTML5 Canvas Počítačová grafika 15 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Click eventy
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 Počítačová grafika 16 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2. úkol
Vytvorte ’mapovú aplikáciu’ ktorá bude obsahovať
SVG mapové pole (externé SVG)
14 a viac oblastí
Jedinečné územie
Dynamicky generovanovaný histogram kombinovaný s klasifikačným
nástrojom
Infobox - názov územia + 2 ľubovolné charakteristiky
Časť bodov aj za výsledný vizuál
3 týdny na vypracování – 4.5.2022 včetne
možno získat až 60 bodů
úkol odevzdávejte jako archiv .zip
Filip Leitner HTML5 Canvas Počítačová grafika 17 / 19
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Histogram a klasifikačný nástroj
Histogram
Dynamicky generovaný podľa dát
10 tried
Rozmery dynamicky odvodené od veľkosti grafu
Popis Y osi
Klasifikačný nástroj
4 - 7 klasifikačných tried. Počet tried bude možné meniť.
Počiatočný stav = 6 tried definovaných na základe smerodatnej
odchýlky, veľkosť intervalu 0.5std
Hranice intervalov sa vykreslia do histogramu ako zvislé ’čiary’ ktorými
bude možné pohybovať
Hranice intervalov budú mať popisky s hodnotou klasifikovaného javu
(počet obyvateľov)
Vypočítaná klasifikácia bude následne aplikovaná na SVG mapu.
Filip Leitner HTML5 Canvas Počítačová grafika 18 / 19
Díky za pozornost!
. . . . . . . . . . . . . . . . . . . .