Funktionsgraph
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.
<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>