Parabel als Klasse
Der untenstehende JavaScript-Code kann einfach in das linke Fenster des Editor 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.
Zeichnen einer Linie als Klasse
Zeichnen einer Linie als Klasse
Wegen "use strict" müssen auch in JavaScript Variablen mit var oder let deklariert werden.
In der Objekt-Variable ctx werden durch JavaScript dem HTML-Element Leinwand durch die Methode getContext("2d") 2-dimensionale Zeichenobjekte zur Verfügung gestellt.
Im Konstruktor werden die Attribute der Klasse ohne die Schlüsselwörter var bzw. let deklariert (festgelegt) und initialisiert (mit Werten versehen).
In der Methode zeichnen() wird die Linie in einem Browser gezeichnet.
Mit dem Operator new wird aus der Klasse eine Objekt erzeugt.
<!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";var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");class Linie { constructor(xStart,yStart,xEnde,yEnde){ this.xStart=xStart; this.yStart=yStart; this.xEnde=xEnde; this.yEnde=yEnde; } zeichnen(){ ctx.moveTo(this.xStart,this.yStart); ctx.lineTo(this.xEnde,this.yEnde); ctx.stroke(); }}var LinieBeispiel=new Linie(50,50,100,100);LinieBeispiel.zeichnen();</script>
</body></html>
<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";var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");class Linie { constructor(xStart,yStart,xEnde,yEnde){ this.xStart=xStart; this.yStart=yStart; this.xEnde=xEnde; this.yEnde=yEnde; } zeichnen(){ ctx.moveTo(this.xStart,this.yStart); ctx.lineTo(this.xEnde,this.yEnde); ctx.stroke(); }}var LinieBeispiel=new Linie(50,50,100,100);LinieBeispiel.zeichnen();</script>
</body></html>
Zeichnen einer Parabel aus Linien
Zeichnen einer Parabel aus Linien
Attribute der Klasse sind die Parameter der Parabel.
In einer Wiederholung mit Bedingung werden die x-Werte der Parabel durchlaufen und die y-Werte berechnet.
<!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 c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var x=0; var y; ctx.moveTo(x,0); while (x<10) { x=x+1; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(x,y); } ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();</script>
</body></html>
<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 c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var x=0; var y; ctx.moveTo(x,0); while (x<10) { x=x+1; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(x,y); } ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();</script>
</body></html>
Linien durch bestimmte Punkte
Linien durch bestimmte Punkte
Die Linien werden nicht mehr durch die Pixel des Bildschirms gezeichnet, sondern durch Einheiten festgelegte Punkte.
Durch die Schrittweite sind auch Bruchteile der Einheiten möglich.
<!DOCTYPE html><html><body>
<canvas id="Zeichenfläche" width="500" height="500" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas>
<script>"use strict";//Zeichenflächevar c = document.getElementById("Zeichenfläche");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var Schrittweite=0.1; var xEinheiten=10; var yEinheiten=10; var x=0; var y=this.a*x*x+this.b*x+this.c; ctx.moveTo(c.width/xEinheiten*x,c.width/yEinheiten*y); while (x<c.width/xEinheiten) { x=x+Schrittweite; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/xEinheiten*x,c.width/yEinheiten*y); } ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();</script>
</body></html>
<canvas id="Zeichenfläche" width="500" height="500" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas>
<script>"use strict";//Zeichenflächevar c = document.getElementById("Zeichenfläche");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var Schrittweite=0.1; var xEinheiten=10; var yEinheiten=10; var x=0; var y=this.a*x*x+this.b*x+this.c; ctx.moveTo(c.width/xEinheiten*x,c.width/yEinheiten*y); while (x<c.width/xEinheiten) { x=x+Schrittweite; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/xEinheiten*x,c.width/yEinheiten*y); } ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();</script>
</body></html>
Zeichnen der Parabel in ein Koordinatensystem
Zeichnen der Parabel in ein Koordinatensystem
Koordinatensystem wird durch eine Methode gezeichnet.
Koordinaten werden entsprechend verschoben.
<!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 c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=-2; } zeichnen(){ var xEinheiten=4; var yEinheiten=4; var x=-xEinheiten; var y; ctx.moveTo(x,0); while (x<c.width/xEinheiten) { x=x+0.1; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/xEinheiten*x+c.width/2,c.height/yEinheiten*(-y)+c.height/2); } ctx.stroke(); } zeichnenKoordinatensystem(){ ctx.moveTo(0,c.height/2); ctx.lineTo(c.width,c.height/2); ctx.moveTo(c.width/2,0); ctx.lineTo(c.width/2,c.height); ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();ParabelBeispiel.zeichnenKoordinatensystem()</script>
</body></html>
<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 c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=-2; } zeichnen(){ var xEinheiten=4; var yEinheiten=4; var x=-xEinheiten; var y; ctx.moveTo(x,0); while (x<c.width/xEinheiten) { x=x+0.1; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/xEinheiten*x+c.width/2,c.height/yEinheiten*(-y)+c.height/2); } ctx.stroke(); } zeichnenKoordinatensystem(){ ctx.moveTo(0,c.height/2); ctx.lineTo(c.width,c.height/2); ctx.moveTo(c.width/2,0); ctx.lineTo(c.width/2,c.height); ctx.stroke(); }}//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet var ParabelBeispiel=new Parabel(1,0,0);ParabelBeispiel.zeichnen();ParabelBeispiel.zeichnenKoordinatensystem()</script>
</body></html>
Parabel mit Eingabefeldern
Parabel mit Eingabefeldern
Eingabefelder sind HTML-Elemente als Textfelder, deren Wert mit JavaScript ausgelesen und bei Bedarf in eine Zahl umgewandelt wird.
Auch die Schaltfläche ist ein Textfeld, das mit einer JavaScript-Funktion verbunden ist.
<!DOCTYPE html><html><body><form> a:<input id="a" value=0><br> b:<input id="b" value=0><br> c:<input id="c" value=0><br> xmax:<input id="xmax" value=10><br> ymax:<input id="ymax" value=10><br> <p id="xmaxWert"></p> <p id="ymaxWert"></p> <input type="button" onclick="Graph()" value="Zeichne!"></form><br><canvas id="Zeichenfläche" width="400" height="400" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas>
<script>"use strict";//Zeichenflächevar c = document.getElementById("Zeichenfläche");var ctx = c.getContext("2d");
//Koordinatensystemctx.moveTo(0,c.height/2);ctx.lineTo(c.width,c.height/2);ctx.moveTo(c.width/2,0);ctx.lineTo(c.width/2,c.height);ctx.stroke(); //Klasseclass Parabel { constructor(a,b,c,xEinheiten,yEinheiten){ this.a=a; this.b=b; this.c=c; this.xEinheiten=xEinheiten; this.yEinheiten=yEinheiten; } zeichnen(){ var Schrittweite=0.1; var x=-c.width/this.xEinheiten; var y=this.a*x*x+this.b*x+this.c; ctx.moveTo(c.width/this.xEinheiten*x,c.width/this.yEinheiten*y); while (x<c.width/this.xEinheiten) { x=x+Schrittweite; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/this.xEinheiten*x+c.width/2,-c.height/this.yEinheiten*y+c.height/2); } ctx.stroke(); } }//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet function Graph(){ var xEinheiten=2*parseFloat(document.getElementById("xmax").value);//LängederAchse var yEinheiten=2*parseFloat(document.getElementById("ymax").value);//LängederAchse document.getElementById("xmaxWert").innerHTML="max. Wert x-Achse = "+xEinheiten/2; document.getElementById("ymaxWert").innerHTML="max. Wert y-Achse = "+yEinheiten/2; var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var c = parseFloat(document.getElementById("c").value); var ParabelBeispiel=new Parabel(a,b,c,xEinheiten,yEinheiten); ParabelBeispiel.zeichnen();}</script>
</body></html>
<script>"use strict";//Zeichenflächevar c = document.getElementById("Zeichenfläche");var ctx = c.getContext("2d");
//Koordinatensystemctx.moveTo(0,c.height/2);ctx.lineTo(c.width,c.height/2);ctx.moveTo(c.width/2,0);ctx.lineTo(c.width/2,c.height);ctx.stroke(); //Klasseclass Parabel { constructor(a,b,c,xEinheiten,yEinheiten){ this.a=a; this.b=b; this.c=c; this.xEinheiten=xEinheiten; this.yEinheiten=yEinheiten; } zeichnen(){ var Schrittweite=0.1; var x=-c.width/this.xEinheiten; var y=this.a*x*x+this.b*x+this.c; ctx.moveTo(c.width/this.xEinheiten*x,c.width/this.yEinheiten*y); while (x<c.width/this.xEinheiten) { x=x+Schrittweite; y=this.a*x*x+this.b*x+this.c; ctx.lineTo(c.width/this.xEinheiten*x+c.width/2,-c.height/this.yEinheiten*y+c.height/2); } ctx.stroke(); } }//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet function Graph(){ var xEinheiten=2*parseFloat(document.getElementById("xmax").value);//LängederAchse var yEinheiten=2*parseFloat(document.getElementById("ymax").value);//LängederAchse document.getElementById("xmaxWert").innerHTML="max. Wert x-Achse = "+xEinheiten/2; document.getElementById("ymaxWert").innerHTML="max. Wert y-Achse = "+yEinheiten/2; var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var c = parseFloat(document.getElementById("c").value); var ParabelBeispiel=new Parabel(a,b,c,xEinheiten,yEinheiten); ParabelBeispiel.zeichnen();}</script>
</body></html>
Parabel mit Array als Wertetabelle
Parabel mit Array als Wertetabelle
Die Daten können nicht nur direkt gezeichnet werden, sondern auch als Array abgespeichert werden.
<!DOCTYPE html><html><body><form> a:<input id="a"> b:<input id="b"> c:<input id="c"> <p id="xmax"></p> <p id="ymax"></p> <input type="button" onclick="Graph()" value="Zeichne!"></form><br><canvas id="Zeichenfläche" width="400" height="400" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas><p id="TabelleÜberschrift"></p><p id="Tabelle"></p><script>'use strict';//Zeichenflächevar canvas = document.getElementById("Zeichenfläche");var ctx = canvas.getContext("2d");var xEinheiten=2*prompt("xmax",10);//LängederAchsevar yEinheiten=2*prompt("ymax",10);//LängederAchsevar y=[];document.getElementById("xmax").innerHTML="max. Wert x-Achse = "+xEinheiten/2;document.getElementById("ymax").innerHTML="max. Wert y-Achse = "+yEinheiten/2;//Koordinatensystemctx.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(); //Klasseclass Parabel { constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var Schrittweite=0.1; var x=-canvas.width/xEinheiten; var i=0; y[i]=this.a*x*x+this.b*x+this.c; ctx.moveTo(canvas.width/xEinheiten*x,canvas.width/yEinheiten*y[i]); while (x<canvas.width/xEinheiten) { i=i+1; x=x+Schrittweite; y[i]=this.a*x*x+this.b*x+this.c; ctx.lineTo(canvas.width/xEinheiten*x+canvas.width/2,-canvas.height/yEinheiten*y[i]+canvas.height/2); } ctx.stroke(); } }//Objekt ParabelBeispiel wird aus der Klasse Parabel gezeichnet function Graph(){ var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var c = parseFloat(document.getElementById("c").value); var ParabelBeispiel=new Parabel(a,b,c); ParabelBeispiel.zeichnen(); for(var i = 0; i < 400; i=i+20){ document.getElementById("TabelleÜberschrift").innerHTML="y-Werte"; document.getElementById("Tabelle").innerHTML+=y[i]*yEinheiten/2/canvas.height; document.getElementById("Tabelle").innerHTML+="<br>"; }}</script>
</body></html>
</body></html>