Diskuze: Kreslení na canvas po zadání hodnot z inputu.
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Nevim jestli to chapu spravne -> ty souradnice dole jsou jeden bod, a cara se ma kreslit z nej tam kam klikas? Takze to udela takovyho jezka casem?
Opravil jsem trochu ten kod. Mimochodem mas tam jeden velky nesmysl a to ze
po kazdem zmacknuti tlacitka (onclick) zavolas funkci 'draw' a ta prida novy
event listener. Ten stary event listener ale stale posloucha 
Na tom js-fiddle mi to ne uplne spravne zjistuje souradnice. Tak mozna pogooblovat a najit reseni, ktere cte souradnice spravne.
<canvas id=myCanvas style="width:200px; height:200px; border:2px solid #f00"></canvas>
<div>
<input type="text" id="souradnice1"> <br>
<input type="text" id="souradnice2"> <br>
<button id="butt">Generuj</button> <br>
</div>
<script>
function getMousePos(event)
{
return {
x: event.clientX - event.target.offsetLeft,
y: event.clientY - event.target.offsetTop
};
}
function getInput(event)
{
souradnice1 = Number(document.getElementById("souradnice1").value);
souradnice2 = Number(document.getElementById("souradnice2").value);
}
function draw(event)
{
console.log(souradnice1);
console.log(souradnice2);
var mousePos = getMousePos(event);
kontext.strokeStyle = "red";
kontext.beginPath();
kontext.moveTo(mousePos.x, mousePos.y);
kontext.lineTo(mousePos.x + souradnice1, mousePos.y + souradnice2); // neboj se pouzivat mezery
kontext.closePath();
kontext.stroke();
}
// --- inicializace ---
var butt = document.getElementById('butt');
var canvas = document.getElementById('myCanvas');
var kontext = canvas.getContext('2d');
var souradnice1; // musis je pridat global, pokud je chces pouzivat ve dvou ruznych funkcich
var souradnice2;
canvas.addEventListener('click', draw, false);
butt.addEventListener('click', getInput, false);
</script>+20 Zkušeností
+2,50 Kč
Jan Novák:19.1.2022 9:27
Moc děkuji. A ano, nebyl jsem si přesně jistý co dělám a ano vyleze z
toho někdy neprostý nesmysl.... 
Učím se to sám a jsem teprve víceméně v začátcích, takže to
často funguje na bázi pokusu a omylu... Zrovna v tomto případě jsem si
myslel, že eventListener funguje trochu jinak, než tomu ve skutečnosti je...
Ale tak lepší být za blbce jednou a zeptat se, než se bát a být tím
blbcem pořád.
JsonKody:19.1.2022 13:05
V pohode 
Doporucuju
kouknout na ten muj kod, snazil jsem se ti to napsat nejlip jak to slo. Je tam i
par komentaru Jo a kdybys
chtel, planoval jsem ze bych zkusil free naucit na discordu/twitchi nejake
zaklady JS abych vedel jak to ucit.
Muj discord nick -> JsonKody#2976
Kod: https://codepen.io/…/pen/qBPwJzd?…
PS: porad me zajima jestli jsem ale pochopil spravne co to ma delat
JsonKody:26.1.2022 11:26
Nejsem zdaleka odbornik na canvas, ale jak ho chapu ja tak si ho muzes
predstavit jako papir a jedine co mas je pastelka ... thats it.
Je to jen jedna vrstva, v podstate to muzes brat ze je to obrazek. Jak mile na
nej udelas caru je to obrazek cary atd. Neni tam zadny slozitejsi koncept. Kdyz
se chces vratit musis proste nakreslit obrazek znovu v tom stavu do jakeho se
chces vratit, takze to vyzaduje implementaci nejakeho systemu "nad tim" .. treba
pouzit navrhovy vzor (v tech se taky zas tolik nevyznam) Memento, ktery slouzi k
ukladani jednotlivych stavu takze je pak muzes vyvolavat jako v nejakem editoru
(zmena zpet/vpred).
No preju hodne stesti
Zobrazeno 19 zpráv z 19.
