Canvas Element

09.01.2017 11:31 Uhr

Das Canvas Element

Mit Hilfe von Script-Sprachen (vorwiegend JavaScript) können mit dem HTML 5 Canvas-Element Grafiken auf Webseiten erzeugt werden. Das Element umfasst dabei eine rechteckige Zeichenfläche, die individuell gestaltet werden kann. Innerhalb dieser Grundfläche können über verschiedene Methoden unterschiedliche Formen wie Kreise, Rechtecke oder selbst definierte Formen erzeugt werden.

Hierzu:  W3schools Referenz

HTML:

<canvas id="Canvasobject0" > 
Ihr Browser unterstützt leider nicht das HTML 5 Canvas Element. </canvas>

CSS:

#Canvasobject0 {
width: 200px;
height: 200px;
border: 2px solid #0000FF;
}

Das Canvas- Element wird mit einer „id“, Höhe und Breite etabliert. Sollte der Browser das Canvas- Element noch nicht unterstützen, so wird der entsprechende Fehlertext ausgegeben, da der Canvas-Tag in diesem Fall als einfacher Auszeichnungstag interpretiert wird.


Rechteck

HTML:

<canvas id="Canvasobject1" > 
Ihr Browser unterstützt leider nicht das HTML 5 Canvas Element. </canvas>

CSS:

#Canvasobject1 {
width: 200px;
height: 200px;
border: 2px solid #0000FF;
}

Javascript:

var c = document.getElementById("Canvasobject1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#B4045F";
ctx.fillRect(10,50,150,75);

Innerhalb des JavaScripts wird das Canvasobjekt per „id“ und DOM aufgrufen und in der Variable „c“ gespeichert. Anschließend wird mit der Funktion getContext() das Context Objekt „cxt“ erstellt. Auf dieses Objekt können nun die verschiedenen Methoden und Deklarationen angewandt werden:

  • fillStyle (Definition der Füllfarbe)
  • fillRect() (Ein Rechteck kann als vordefiniertes Zeichenobjekt mit der Angabe der x-/ y- Koordinate, Höhe und Breite direkt erstellt werden. -> fillRect(x,y,Breite,Höhe);/ Füllung des Objektes mit der Füllfarbe)

um ein Rechteck als Zeichenobjekt innerhalb der Grundfläche zu erstellen.


Zusammengesetzte Linien

HTML und CSS wie oben

Javascript:

var c = document.getElementById("Canvasobject2");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,50);
ctx.lineTo(140,50);
ctx.lineTo(100,140);
ctx.lineTo(60,100);
ctx.lineTo(50,100);
ctx.fill();

Zusammengesetzte Linien werden über die einzelnen Start- und Endpunkte der Abschnitte definiert. Mit moveTo wird der Startpunkt der Geraden definiert. Alle nachfolgenden Punkte, die sich durch Linien miteinander verbinden, werden mit lineTo festgelegt. Die Methode fill() legt fest, dass die neue Zeichenform mit einer vorher definierten Farbe ausgefüllt werden soll. Alternativ kann die Fläche auch über stroke() umrandet werden. Mit der Methode closePath() werden der Start- und Endpunkt automatisch miteinander verbunden, sodass eine geschlossene Fläche entsteht.


Kreis

Javascript:

var c = document.getElementById("Canvasobject3"); 
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(50,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

Methoden zur Erstellung eines Kreisobjektes:

  • beginPath()/ closePath() (Umschließende Signalmethoden für das Zeichenobjekt) und
  • arc() (Methode zum Erstellen eines Kreises – arc(x- Koordinate, y- Koordinate, Radius, Startwinkel, Endwinkel, Uhrzeigersinn?- true/false))

Hinweise:

  • Start- und Endwinkel müssen in der Einheit Bogenmaß – und nicht Gradmaß – angegeben werden!
  • Der 360°-Vollwinkel wird mit 2*Math.PI. angegeben.
  • Soll also ein „ganzer“ Kreis gezeichnet werden, muss entsprechend unserem Beispiel der Startwinkel mit „0“ und der Endwinkel mit 2*Math.PI. festgelegt werden.

1/4- bzw. 3/4 Kreise

var c = document.getElementById("Canvasobject4"); 
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,30,0,(Math.PI*0.5),true);
ctx.closePath();
ctx.fill();cxt.beginPath();
ctx.moveTo(130,50);
ctx.arc(130,50,30,0,(Math.PI*1)/2,false);
ctx.closePath();
ctx.fill();

Hinweise:

  • Damit die Füllebene bis zum Kreismittelpunkt reicht, muss zunächst der Startpunkt der Fläche auf den Kreismittelpunkt gesetzt werden (cxt.moveTo(x- Kreiskoordinate, y- Kreiskoordinate);).
  • Die Winkelangaben beider Kreise sind identisch (Division durch 2 oder Multiplikation mit 0,5), entscheidend wirkt sich die Angabe über den Uhrzeigersinn aus (true – mit dem Uhrzeigersinn/ false – entgegen dem Uhrzeigersinn.

Transformation

var c = document.getElementById("Canvasobject5"); 
var ctx = c.getContext("2d");
ctx.strokeRect(5,5,50,40);
ctx.scale(3,3);
ctx.strokeRect(5,5,50,40);

Es gibt verschiedene Möglichkeiten ein Objekt in Canvas zu transformieren. Im Beispiel oben wird die Größe mit scale() verändert. Dabei ist die erste Zahl die Länge und die zweite die Höhe, scale(Länge, Höhe).

weitere Beispiele in der Ajaxschmiede

vorherige Seite / nächste Seite

Schlagwörter: