Funktionsgraph zeichnen

Der JavaScript-Code der folgenden Programme kann einfach in das linke Fenster des Editors von W3Schools kopiert und das Programm mit RUN CODE im rechten Fenster angezeigt werden.
Falsche Eingabe können mit STRG-R rückgängig gemacht werden.

Funktionsgraph einer Normalparabel durch die Methode lineTo(x,y)

Ausgangspunkt ist der denkbar einfachste JavaScript-Code für einen Funktionsgraphen.
In einer Zählschleife, die Zählvariable wird dabei meist mit i bezeichnet, werden die Punkte des Graphen gezeichnet.

<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0,0);for(i=0;i<10;i++){ctx.lineTo(i,i*i)}ctx.stroke();</script>
</body></html>

Funktionsgraph einer beliebigen Funktion des JavaScript Objekts Math

<!DOCTYPE html><html><head><script>a=-20;b=0.1;c=250;function Graph(){ Zeichenflaeche(); Koordinatensystem(); zeichnen()}
function Zeichenflaeche(){ canvas= document.getElementById("myCanvas"); ctx = this.canvas.getContext("2d");} function Koordinatensystem(){ //y-Achse ctx.moveTo(250,0); ctx.lineTo(250,500); //x-Achse ctx.moveTo(0,250); ctx.lineTo(500,250); ctx.stroke();}function f(x){ var y=a*Math.sin(b*x)+c; return y;}function zeichnen(){ ctx.moveTo(250,250); for(var x=250;x<500;x=x+1){ ctx.lineTo(x,f(x)); ctx.stroke(); }}</script></head>
<body><canvas id="myCanvas" width="500" height="500"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><script>Graph();</script></body></html>

Funktionsgraph mit Hilfe von Klassen mit JavaScript zeichnen

Aus der der Klasse Graph mit 3 Attributen (Parameter des Funktionsterms) wird durch die Konstruktor-Methode ein Objekt gebildet, welches mit entsprechenden Methoden die Festlegung des Funktionsterms mit Hilfe von 3 Parametern und das Zeichnen von Koordinatensystem und Funktionsgraph mit Festlegung der maximalen Werte für die Achsen ermöglicht.

Attribute einer Klasse müssen im Gegensatz zu lokalen Variablen der Methoden einer Klasse nicht mit var deklariert werden.
Wegen der Anweisung "use strict" zu Beginn des JavaScript-Skripts müssen auch globale Variablen außerhalb der Klasse mit var deklariert werden.
Die Klasse Graph hat die Methode f um einen Funktionsterm mit maximal 3 Parametern einzugeben, der aus mathematische Funktionen aus dem JavaScript-Objekt Math bestehen kann (z.B. y=a*Math.sin(x)+b).
Durch lokale Variable werden die maximalen Werte der Achsen und damit die Einheiten auf den Achsen des Koordinatensystems festgelegt.
Durch die globalen Variablen canvas und ctx werden in der Zeichenfläche 2-dimnsionale Zeichenobjekte zur Verfügung gestellt.

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas>
<script>"use strict";//Zeichenflächevar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
//Klasseclass Graph { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; }f(x){ var y=this.a*x; return y; } zeichnen(){ var xEinheiten=4; var yEinheiten=4; var x=-xEinheiten; var y; ctx.moveTo(x,0); while (x<canvas.width/xEinheiten) { x=x+0.1; y=this.f(x); ctx.lineTo(canvas.width/xEinheiten*x+canvas.width/2,canvas.height/yEinheiten*(-y)+canvas.height/2); } ctx.stroke(); } zeichnenKoordinatensystem(){ ctx.moveTo(0,canvas.height/2); ctx.lineTo(canvas.width,canvas.height/2); ctx.moveTo(canvas.width/2,0); ctx.lineTo(canvas.width/2,canvas.height); ctx.stroke(); }}//Objekt GraphBeispiel wird aus der Klasse Graph gezeichnet var GraphBeispiel=new Graph(2,0,0);GraphBeispiel.zeichnen();GraphBeispiel.zeichnenKoordinatensystem()</script>
</body></html>

Page updated

Google Sites

Report abuse