Diskuze: funkce v Js
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Cobis:24.10.2017 11:30
Mám dojem, že metoda document.write() přepíše obsah celé stránky, proto se nezobrazuje canvas.
<!DOCTYPE html>
<html>
<head>
<title>fc</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" id="pocet_jehel" size="10" />
<button id="tlacitko">Proveď</button>
<canvas id="platno" width="910" height="500"></canvas>
<div id="output"></div>
<script>
var protnula = 0;
var pocetJehel = document.getElementById("pocet_jehel");
var tlacitko = document.getElementById("tlacitko");
var output = document.getElementById("output");
var platno = document.getElementById("platno");
var kontext = platno.getContext("2d");
kontext.moveTo(0, 0); // nakresleni okraju platna
kontext.lineTo(910, 0);
kontext.lineTo(910, 500);
kontext.lineTo(0, 500);
kontext.lineTo(0, 0);
kontext.moveTo(130.5, 0); //nakresleni linek
kontext.lineTo(130.5, 500);
kontext.moveTo(260.5, 0);
kontext.lineTo(260.5, 500);
kontext.moveTo(390.5, 0);
kontext.lineTo(390.5, 500);
kontext.moveTo(520.5, 0);
kontext.lineTo(520.5, 500);
kontext.moveTo(650.5, 0);
kontext.lineTo(650.5, 500);
kontext.moveTo(780.5, 0);
kontext.lineTo(780.5, 500);
kontext.strokeStyle = "red";
kontext.stroke();
kontext.beginPath();
function vykresli()
{
console.log("proslo");
// vykreslí 100 jehel
for (var i = 0; i <= 100; i++)
{
var x = (Math.random()) * 910; //nahodne souradnice X
var y = (Math.random()) * 500; //souradnice Y
var uhel = (Math.random()) * 360; //náhodny ůhel otočení jehly
var delkaJehly = 130;
var x2 = x + (delkaJehly * Math.cos(uhel)); //x2
var y2 = y + (delkaJehly * Math.sin(uhel)); // x2 dle ůhlu natočení
// ověří jestli jehla nepřesahuje plátno. Jestli ano nakreslí druhou
if (x2 <= 0 || y2 <= 0 || x2 >= 910 || y2 >= 500)
{
i = i - 1;
}
else
{
kontext.moveTo(x, y);
kontext.lineTo(x2, y2);
// ověření zda jehla neprotíná ůsečku
for (var r = 130; r < 781; )
{
if (x <= r && x2 >= r || x >= r && x2 <= r)
{
++protnula;
}
r += 130;
}
}
}
kontext.strokeStyle = "black";
kontext.stroke();
///////////////////////////////////////////////////////////////////////
//document.writeln("x1 a y1 je :" + x + " " + y + "x2 a y2 je:" + x2 +" " + y2);
//document.writeln("uhel je :" + uhel);
//document.writeln("protnula :" + protnula);
//output.insertAdjacentHTML("beforeend", "x1 a y1 je :" + x + " " + y + "x2 a y2 je:" + x2 +" " + y2 + "<br>");
//output.insertAdjacentHTML("beforeend", "uhel je :" + uhel + "<br>");
//output.insertAdjacentHTML("beforeend", "protnula :" + protnula);
// nebo
appendText(output,"x1 a y1 je :" + x + " " + y + "x2 a y2 je:" + x2 +" " + y2);
output.appendChild(document.createElement("BR"));
appendText(output, "uhel je :" + uhel);
output.appendChild(document.createElement("BR"));
appendText(output, "protnula :" + protnula);
//////////////////////////////////////////////////////////////////////
}
function appendText(element, string)
{
var textNode = document.createTextNode(string);
element.appendChild(textNode);
return textNode;
};
tlacitko.onclick = vykresli;
</script>
</body>
</html>
Akceptované řešení
+20 Zkušeností
+2,50 Kč
+20 Zkušeností
+2,50 Kč
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.
Zobrazeno 3 zpráv z 3.