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íky...Zobrazeno 3 zpráv z 3.