Zeichenobjekte als Klassen

Klassen in JavaScript

JavaScript kennt eigentlich keine Klassen, sondern nur Prototypen von Objekten.
Um auch in JavaScript objektorientierte Programmierung mit Klassen (OOP) zu ermöglichen, wurden Klassen (W3Schools) als Option formal eingeführt.
In der objektorientierten Programmierung sind Objekte durch Eigenschaften (Attribute) und Methoden gekennzeichnet.
Klassen sind dazu da, um Objekte zu bilden, weswegen sie zum einen die entsprechenden Methoden der Objekte vorgeben und in einer speziellen Konstruktor-Methode die Eigenschaften der Objekte festlegen (deklarieren) und mit Werten versehen (initialisieren).
In der Konstruktor-Methode ist das Schlüsselwort this Platzhalter für die Bezeichnungen der durch die Klasse entstehenden Objekte.
In den Methoden kann nur Eigenschafen verwendet werden, die im Konstruktor deklariert wurden.
Durch die Anweisung 'use strict' kann die Deklarierung von Eigenschaften durch Variable allgemein in JavaScript erzwungen werden.

Punkt (Kreis) als Objekt einer Klasse

Ein Punkt als Objekt einer Klasse hat Radius und Koordinaten als Attribute.
Die Attribute Radius, Farbe sowie Mittelpunktswinkel und Startwinkel des Kreisbogens werden durch die JavaScript-Methode arc() zur Verfügung gestellt. Wobei die Methode arc() wiederum aufgrund der JavaScript-Methode getContext() im Objekt Zeichenfäche verwendet werden kann.

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>'use strict';var canvas= document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Punkt{ zeichnen(){ ctx.beginPath(); ctx.arc(100, 75, 5, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.stroke(); }}Punkt1=new Punkt;Punkt1.zeichnen();</script>
</body></html>

Unterschiedliche Punkte zeichnen

Vorteil einer Klasse ist, dass man mit dem Operator new beliebig viele Punkte mit unterschiedlichen Eigenschaften zeichnen kann.
Radius und Farbekönnen in der Konstruktor-Methode der Klasse und die Koordinaten als Parameter der Methode Zeichnen durch Variablen festgelegt werden.
this steht als Platzhalter für die Unterschiedlichen Objekt-Bezeichner.

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Punkt{ constructor(r,Farbe){ this.r=r; this.Farbe=Farbe } //Werden die Koordinaten nur in der einer Methode verwendet, brauchen sie kein this. zeichnen(x,y){ ctx.beginPath(); ctx.arc(x, y, this.r, 0, 2 * Math.PI); ctx.fillStyle=this.Farbe; ctx.fill(); ctx.stroke(); }}
Punkt1=new Punkt(5,"blue");Punkt1.zeichnen(10,20);Punkt2=new Punkt(10,"red");Punkt2.zeichnen(50,30);</script>
</body></html>

Viele gleichartige Punkte zeichnen

Klassen können aus anderen Klassen bestehen.
Besteht eine Klasse aus gleicharteigen Klassen wird dies mit einem Array (Liste) umgesetzt.
Ein Array wird durch eckige Klammern deklariert und durch eine Zählschleife gefüllt.

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Punkt{constructor(r){this.r=r;} zeichnen(x,y){ ctx.beginPath(); ctx.arc(x, y, this.r, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.stroke(); }}class Punktreihe{ constructor(){ this.Punkt=[]; } zeichnen(){ for (var i=0;i<=3;i=i+1){ this.Punkt[i]=new Punkt(5); this.Punkt[i].zeichnen(20*i,30); } }}Punktreihe1=new Punktreihe();Punktreihe1.zeichnen();</script>
</body></html>

Punktreihen als Klasse von Zeilen

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Punkt{constructor(r){this.r=r;} zeichnen(x,y){ ctx.beginPath(); ctx.arc(x, y, this.r, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.stroke(); }}class Punktreihe{ constructor(){ this.Punkt=[]; } zeichnen(){ for (var j=0;j<=3;j=j+1){ for (var i=0;i<=3;i=i+1){ this.Punkt[i]=new Punkt(5); this.Punkt[i].zeichnen(40*i,30*j); } } }}
class Punktreihen{ constructor(){ this.Punktreihe=[]; } zeichnen(){ for (var j=0;j<=3;j=j+1){ Punktreihe[j]=new Punktreihe(); Punktreihe[j].zeichnen(); } }}
Punktreihe1=new Punktreihe();Punktreihe1.zeichnen();Punktreihen1=new Punktreihen()Punktreihen1.zeichnen;
</script>
</body></html>