3D - Die Dimensionen der Grafik

Da wir mit unserem <canvas></canvas> Element Grafik auf dem Bildschirm rendern wollen, müssen wir auch die elementaren Konzepte der Grafik kennen. Für den Anfang reicht es allerdings, wenn wir uns ein wenig über die Dimensionen informieren.

Die "nullte" Dimension (0D) können wir uns nur mit einem Punkt vorstellen. Ein Punkt hat laut den meisten mathematischen Definitionen und Herangehensweisen keine Höhe, Breite und Tiefe. Er zeigt einfach nur eine bestimmte Stelle in einem System an und hat keine Abmessungen. Sprechen wir jedoch von der Computergrafik und einem Punkt auf dem Bildschirm, müssen wir diesen als einen Pixel ansehen. Somit wird dieser Punkt für uns berechenbar.

Die erste Dimension (1D) kennen wir als eine Linie. Tatsächlich hat diese Linie einen Anfangs- und Endpunkt. Wir können die erste Dimension also auf unserem Bildschirm abbilden, sobald wir zwei Punkte setzen und diese miteinander verbinden.

Unterschied 0D und 1D - CodingLab

Die zweite Dimension (2D) kennen wir bereits aus der Schule. Ein Blatt Papier mit einem Koordinatensystem. Aber auf dem Blatt Papier sehen wir doch eigentlich auch nur zwei Linien. Warum sehen wir dann nicht zweimal die erste Dimension?

Ganz einfach: Die Linien schneiden sich und können somit nicht mehr getrennt betrachtet werden, da ein Punkt von Linie "A" auf der Linie "B" liegt und umgekehrt. Also besteht die zweite Dimension aus mindestens zwei Linien, die sich kreuzen.

Unterschied 1D und 2D - CodingLab

Die dritte Dimension (3D) ist die Dimension in der wir Leben. Diese verleiht einem jedem Objekt eine Tiefe. Mathematisch ist diese Aussage zwar grenzwertig, aber für die Grafik am Computer besser zu verstehen. Ein dreidimensional betrachtetes Rechteck, kann hinter seiner "Front" immer etwas verbergen, dass wir nur aus einer anderen Perspektive bzw. mit einer Transparenz sehen können.

Ein Rechteck in der dritten Dimension - CodingLab

Einen Punkt zeichnen

Üblicherweise fängt man mit dem einfachsten an: Ein Punkt zeichnen. Da ein Punkt allerdings auf dem Bildschirm verschiedene Größen haben kann, legen wir hier unseren Punkt als ein Pixel fest. Mit dem <canvas></canvas> Element haben wir dafür verschiedene Möglichkeiten:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Mithilfe einer Linie Context.beginPath(); Context.moveTo( 10, 10 ); Context.lineTo( 11, 11 ); Context.stroke(); //Mithilfe eines Rechtecks Context.fillRect( 20, 10, 1, 1 ); //Mithilfe eines Kreises Context.beginPath(); Context.arc( 30, 10, 1, 0, 2 * Math.PI, true ); Context.fill(); //Mithilfe der Bilddaten var CanvasData = Context.getImageData(0, 0, Canvas.width, Canvas.height ); var PixelIndex = (40 + 10 * Canvas.width) * 4; CanvasData.data[PixelIndex + 0] = 0; CanvasData.data[PixelIndex + 1] = 0; CanvasData.data[PixelIndex + 2] = 0; CanvasData.data[PixelIndex + 3] = 255; Context.putImageData( CanvasData, 0, 0 );

Möchte man einen Punkt mithilfe einer Linie zeichnen, so benötigen wir die Funktion beginPath(). Mit dieser Methode teilen wir unserem Kontext mit, dass wir dabei sind eine Linie zu zeichnen. Als nächstes benutzen wir die moveTo( x, y ) Methode, um zum Anfangspunkt unserer Linie zu springen. Diese akzeptiert zwei Parameter:

ParameterBeschreibung
xGibt den Wert der X-Koordinate des Canvas an.
yGibt den Wert der Y-Koordinate des Canvas an.

Mit lineTo( x, y ) können wir zwei weitere Parameter für den Endpunkt angeben:

ParameterBeschreibung
xGibt den Wert der X-Koordinate des Canvas an.
yGibt den Wert der Y-Koordinate des Canvas an.

Nun kommt die tatsächliche Anweisung die Linie zu ziehen. Dies geschieht mit der Funktion stroke(), was soviel wie "streichen" bedeutet.

Da wir den Endpunkt lediglich einen Pixel weit entfernt vom Startpunkt gesetzt haben, zeichnet unser Kontext die Linie einen Pixel breit. Das Resultat ist ein ausgefüllter Pixel. Die anderen Methoden sind Teil anderer Artikel.

Eine Linie zeichnen

Da Pfade ausgiebig in einem anderen Tutorial erklärt werden, soll hier lediglich das Prinzip, beim Zeichnen einer einfachen Linie, kurz erklärt werden:

Die Funktion beginPath stellt für unseren Kontext eine Anweisung dar, quasi alle folgenden Daten zu speichern. Haben wir diese Funktion ausgeführt, können wir zu bestimmten Punkten springen (moveTo), Kurven zeichnen (arc() / arcTo() / quadricCurveTo() / bezierCurveTo() ) und sämtliche Informationen über den momentanen Pfad angeben (lineWidth() / strokeStyle). Als letztes benötigen wir eine Funktion, die den Kontext anweist, den Pfad zu rendern. Hierfür können wir unter anderem die Methode stroke() oder auch fill() benutzen.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine diagonale Linie zeichnen Context.beginPath(); Context.lineWidth = "5"; Context.strokeStyle = "red"; Context.moveTo( 10, 10 ); Context.lineTo( 590, 390 ); Context.stroke();

Koordinaten verstehen

Oftmals wird von den Parametern x und y geredet. Doch was bedeuten diese eigentlich und wie findet man sich im "Canvas-Feld" zurecht?

Die beiden Parameter x und y geben die beiden notwendigen Parameter einer Koordinate an. Da eine Fläche aus einer Breite und Höhe besteht müssen wir dem Computer auch mitteilen, wie viele Pixel er nach rechts (Breite) und nach unten (Höhe) gehen soll, bis er den Pixel erreicht hat, den wir bearbeiten wollen. Mit x geben wir den n-ten Pixel der Breite und mit y den n-ten Pixeln der Höhe an.

Wichtig: Es gibt Grafiksysteme, deren Startpunkte nicht oben links sind, sondern beispielsweise unten links oder in der Mitte des Bildschirmes. Dadurch muss man bei anderen Koordinatensystemen umdenken.

Illustration aus 10 Feldern. - CodingLab

Im obigen Beispiel haben wir ein Canvas bestehend aus 5x2 Pixeln. Wollen wir auf dem Canvas den mittleren Pixel in der zweiten Reihe ausfüllen, müssen wir den dritten Pixel der Breite (x = 3) und den zweiten Pixel der Höhe (y = 2) angeben. Der dazugehörige Code lautet also wie folgt:

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="5" height="2" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine diagonale Linie zeichnen Context.beginPath(); Context.moveTo( 3, 1 ); Context.lineTo( 3, 2 ); Context.stroke();

Hierbei müssen wir darauf achten, dass wir ja eine Linie ziehen wollen, um den Pixel auszumalen. Aus diesem Grund müssen wir den Cursor einen Pixel daneben (in diesem Fall darüber) ansetzen, um von da aus in diesen Pixel rein zuzeichnen.

Abschließend müssen wir also feststellen, dass eine Linie zu zeichnen sehr einfach, aber einen Pixel auszufüllen schon etwas mehr Denkarbeit leistet. Günstigerweise sollten nicht all zu viele Szenarien auftreten, bei denen wir einzelne Pixel setzen wollen. Bei mehreren Pixeln, die gesetzt werden müssen, eignet sich die Bilddaten-Methode am besten.

Linien Eigenschaften

Eine Linie muss nicht immer nur ein stumpfer Strich sein. Mit folgenden Variablen können wir die Eigenschaften unserer Linie verändern:

EigenschaftTypBeschreibung
lineWidthIntegerGibt die Breite der Linie an.
lineCapStringbutt : Schließt die Linie flach ab.

round : Schließt die Linie rund ab.

square : Schließt die Linie rechteckig ab.

lineJoinStringGibt die Verbindungsmethode an, wenn sich zwei Linien treffen.

bevel : Verbindet zwei Linien mit einer schrägen Kante.

round : Verbindet zwei Linien mit einer runden Kante.

miter : Verbindet zwei Linien mit einer scharfen Kante.

strokeStyleStringcolor : Gibt die Linienfarbe an.

pattern : Gibt das Muster der Linie an.

gradient : Gibt den Farbverlauf der Linie an.

Wenn wir diese Methoden aufrufen, sollten wir darauf achten, dass sie innerhalb eines Pfades ihre Gültigkeit besitzen und bei vermehrter Ausführung die vorangegangenen Werte überschreiben.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine Linie mit Breite = 10 und runden Ecken in rot Context.beginPath(); Context.lineWidth = 5; Context.strokeStyle = "green"; Context.lineCap = "square"; Context.lineWidth = 10; Context.strokeStyle = "#FF0000"; Context.lineCap = "round"; Context.moveTo( 10, 10 ); Context.lineTo( 400, 10 ); Context.stroke();