Dehnung und Kraft

Beschreibung

Programm-Versionen

Die Quelltexte der Programme können entweder

einfaches Programm zum Zeichnen des Gummibandes

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="200" height="600"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas>
<script>//Variable für Zeichenfläche mit Zeichenobjektenvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");//Variable zum Zeichnen von Linie und Kreisvar x=100;var y=200;//Zeichnen des Gummibandes mit Farbectx.beginPath()ctx.moveTo(100,0);ctx.lineTo(x,y);ctx.strokeStyle="red";ctx.stroke();//Zeichnen des Enpunktes (Kreis) des Gummibandes mit Farbectx.beginPath()ctx.arc(x, y, 5, 0, 2 * Math.PI);ctx.fillStyle="black";ctx.fill();ctx.strokeStyle="black";ctx.stroke();</script>
</body></html>

Programm mit Eingaben und Dehnung

<!DOCTYPE html><html><body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="600"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="val" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){  ctx.clearRect(0, 0, canvas.width, canvas.height);  y=y0+parseInt(document.getElementById("val").value);  ctx.beginPath();  ctx.moveTo(100,0);  ctx.lineTo(x,y);  ctx.strokeStyle="red";  ctx.stroke();  ctx.beginPath()  ctx.arc(100, y0, 5, 0, 2 * Math.PI);  ctx.strokeStyle="black";  ctx.stroke();  ctx.beginPath()  ctx.arc(x, y, 5, 0, 2 * Math.PI);  ctx.fillStyle="black";  ctx.fill();  ctx.strokeStyle="black";  ctx.stroke();}</script>
</body></html>

Programm mit Berechnung der Kraft

<!DOCTYPE html><html><body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="300"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="Dehnung" value=0><br><p>Dehnungskonstante in N/cm </p><input type="number" id="Dehnungskonstante" value=0><br><p>Kraft in N </p><input type="number" id="Kraft" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><input type="button" onclick="Berechnen()" value="Berechnen"><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){  ctx.clearRect(0, 0, canvas.width, canvas.height);  y=y0+parseInt(document.getElementById("Dehnung").value);  ctx.beginPath();  ctx.moveTo(100,0);  ctx.lineTo(x,y);  ctx.strokeStyle="red";  ctx.stroke();  ctx.beginPath()  ctx.arc(100, y0, 5, 0, 2 * Math.PI);  ctx.strokeStyle="black";  ctx.stroke();  ctx.beginPath()  ctx.arc(x, y, 5, 0, 2 * Math.PI);  ctx.fillStyle="black";  ctx.fill();  ctx.strokeStyle="black";  ctx.stroke();}function Berechnen(){var D=parseInt(document.getElementById("Dehnung").value);var s=parseInt(document.getElementById("Dehnungskonstante").value);var F=D*sparseInt(document.getElementById("Kraft").value=F)}</script>
</body></html>

Programm mit physikalischen Formeln

<!DOCTYPE html><html>
<head><script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script></head>
<body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="300"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="Dehnung" value=0><br><p>Dehnungskonstante in N/cm </p><input type="number" id="Dehnungskonstante" value=0><br><p>Kraft in N </p><input type="number" id="Kraft" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><input type="button" onclick="Berechnen()" value="Berechnen"><p>\(D=\dfrac{F}{\Delta s}\Rightarrow F=D\cdot \Delta s\)</p><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){  ctx.clearRect(0, 0, canvas.width, canvas.height);  y=y0+parseInt(document.getElementById("Dehnung").value);  ctx.beginPath();  ctx.moveTo(100,0);  ctx.lineTo(x,y);  ctx.strokeStyle="red";  ctx.stroke();  ctx.beginPath()  ctx.arc(100, y0, 5, 0, 2 * Math.PI);  ctx.strokeStyle="black";  ctx.stroke();  ctx.beginPath()  ctx.arc(x, y, 5, 0, 2 * Math.PI);  ctx.fillStyle="black";  ctx.fill();  ctx.strokeStyle="black";  ctx.stroke();}function Berechnen(){var D=parseInt(document.getElementById("Dehnung").value);var s=parseInt(document.getElementById("Dehnungskonstante").value);var F=D*sparseInt(document.getElementById("Kraft").value=F)}</script>
</body></html>