Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 18): Zeichnen mit canvas (2)

Web-Apps erstellen (Teil 18): Zeichnen mit canvas (2)

Bevor die wichtigsten Zeichenoptionen vorgestellt werden, noch einige Hinweise zu dem Koordinatensystem, auf dem Canvas-Anwendungen aufgebaut sind. Das Koordinatensystem entspricht dem aus SVG. Der Nullpunkt liegt in der linken oberen Ecke.

Die Länge der y-Achse entspricht der Höhe des canvas-Elements.


Texte schreiben

Mit der Methode fillText() könnt ihr Texte in eine canvas-Anwendung einfügen. fillText() müssen drei Parameter zugewiesen werden. Zusätzlich gibt es noch einen vierten Parameter, der allerdings optional ist.
fillText('PSD-Tutorials.de', 200, 200);

Hier ein Beispiel für eine typische Anwendung:
<script>
/* <![CDATA[ */
function zeichne(){
  var canvas = document.getElementById("meincanvas");
  if (canvas.getContext){
    var context = canvas.getContext('2d');
    context.fillText  ('PSD-Tutorials', 40, 100);
  } 
}
/* ]]> */
</script>

 
Der erste Parameter ist der eigentliche Text, der in Anführungszeichen gesetzt wird. Die Parameter zwei und drei bestimmen die Position des Textes auf der X- und der Y-Koordinate.

Bilder



Über einen optionalen vierten Parameter kann man die Zeilenlänge bestimmen. Dieser Parameter ist natürlich in erster Linie immer dann interessant, wenn der Text länger als der im canvas-Element verfügbare Platz ist.
context.fillText('Ob Neubau eines Eigenheims oder Sanierung Ihrer Altbauwohnung, Renovierung einzelner Räume oder Neuanlage der kompletten Außenanlage.', 150, 50, 300);

In solchen Fällen wird der "überflüssige" Text dann einfach abgeschnitten, ist also nicht mehr zu sehen.

Alternativ zu fillText() kann auch die Methode strokeText() verwendet werden. Durch strokeText() werden von der angegebenen Zeichenkette ausschließlich die Umrisse angezeigt.


 

Malen und Zeichnen

Selbstverständlich kann man nicht nur Texte in canvas-Anwendungen einfügen. Auch grafische Elemente lassen sich definieren. Dazu gehören beispielsweise Kreise, Linien und Rechtecke. Voraussetzung dafür ist das grundlegende Verständnis der Prinzipien von Pfaden und Linien.

Entscheidende Bedeutung beim Zeichnen kommt den Linien und Pfaden zu. Dank der Pfade lassen sich aus Zeichenfunktionen – von denen die einfachste eine Linie ist – Formen generieren. Diese Formen können entweder nur durch den Umriss (mit stroke) oder mit gefüllter Fläche (mit fill) gestaltet werden.

Linien lassen sich anhand von vier Eigenschaften definieren.

• Linienstärke
• Linienfarbe
• Anfangspunkt
• Endpunkt

Dabei werden stets Anfangs- und Endpunkt miteinander auf einer geraden Linie verbunden.

Man kann explizit festlegen, wie Linien aussehen sollen. Dafür gibt es vier Attribute.

lineCap – bestimmt die Linienart.
lineJoin – hierüber wird der Verbindungstyp zwischen zwei Linien festgelegt.
lineWidth – legt die Linienbreite fest.
miterLimit – das ist die maximal erlaubte Gehrungslänge.

 
Die einzelnen Attribute verdienen noch einmal eine genauere Betrachtung. Da wäre zunächst das lineCap-Attribut, über das sich die Linienart festlegen lässt.
lineCap = Linienart

Anstelle von Linienart wird einer der folgenden Strings erwartet:

butt – die Linienenden sind rechtwinklig. Das ist der Standardwert.
round – die Linienenden sind halbkreisförmig. Der Radius entspricht dabei der Linienstärke.
square – die Linienenden sind rechteckig. Die Höhe entspricht der halben Linienstärke, die Breite der ganzen Linienstärke.

Die Anwendung von lineCap ist also sehr einfach.
// Rechtwinklige Enden
 context.lineWidth = 20;
 context.moveTo(30, 30);
 context.lineTo(30, 220);
 context.lineCap = "butt";
 context.stroke();
 // Rechtwinklige Enden (halbe Linienstärke)
 context.beginPath();
 context.moveTo(70, 30);
 context.lineTo(70, 220);
 context.lineCap = "square";
 context.stroke();
 // Runde Enden
 context.beginPath();
 context.moveTo(110, 30);
 context.lineTo(110, 220);
 context.lineCap = "round";
 context.stroke();

 
Zum besseren Verständnis der verschiedenen Linienarten seht euch bitte die folgende Abbildung an.

Bilder



Die linke Linie entspricht dabei dem Standardwert butt. Auffällig ist, dass die anderen beiden Linien höher sind, obwohl sie mit der gleichen Höhe definiert wurden. Verantwortlich dafür sind die Linienenden, die zur normalen Linienhöhe hinzuaddiert werden.

 
Über lineJoine legt man die Eckenform der Linien fest. Hierfür stehen drei verschiedene Varianten zur Verfügung.

bevel – abgeschrägte Ecken.
miter – die Linien werden so verbunden, dass die äußeren Ecken an einem Punkt enden.
round – die äußeren Ecken werden abgerundet.

Ein Beispiel:
function zeichnen() {
   var context = document.getElementById('meincanvas').getContext('2d');
   // Ein Array, in dem die möglichen lineJoin-Werte stehen
   var lineJoin = ['round','bevel','miter'];
   context.lineWidth = 10;
   for (i=0;i<lineJoin.length;i++){
     context.lineJoin = lineJoin[i];
     context.beginPath();
     context.moveTo(-5,5+i*40);
     context.lineTo(35,45+i*40);
     context.lineTo(75,5+i*40);
     context.lineTo(115,45+i*40);
     context.lineTo(155,5+i*40);
     context.stroke();
   }
 }

 
Die folgende Abbildung zeigt die verschiedenen Eckvarianten:

Bilder



Über die Eigenschaft lineWidth bestimmt man die Linienstärke.
lineWidth = wert

Die Linienstärke gibt man in Form eines numerischen Werts an.

Im folgenden Beispiel werden verschiedene Linien mit unterschiedlichen Stärken gezeichnet.
for(var i=0; i<30; i++){
    var breite = (i%2 == 0)? 0.5 : 0;
    context.translate(15+breite, 0);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, 100);
    context.lineWidth = 1.0 + i*0.5;
    context.stroke();
 }

 
Das Ergebnis sieht im Browser folgendermaßen aus:

Bilder



Pfade

Neben Linien stellen Pfade ein weiteres wichtiges Element innerhalb des "canvas-Universums" dar. Dabei lassen sich mehrere Linien zu einem Pfad verbinden. Jeder Pfad wird über die Methode beginPath()aufgerufen.
void beginPath()

Diese Methode erwartet keinen Parameter.

 
Beendet werden Pfade mit closePath(), was außerdem innerhalb der Pfadliste einen neuen Unterpfad anlegt. Dabei entspricht der erste Punkt des neuen Pfads dem letzten Punkt des geschlossenen Pfads. Wenn Start- und Endpunkt des aktuellen Unterpfads unterschiedlich sind, werden diese beiden Punkte mittels gerader Linie verbunden.
void closePath()

Auch diese Methode erwartet keinen Parameter.

Mit der Methode moveTo() werden die X- und Y-Koordinaten für den Anfang der Linien gesetzt.
void moveTo(x, y)

Dabei entspricht der erste Parameter der horizontalen Koordinate des neuen Punkts. Der zweite Parameter beschreibt hingegen die vertikale Koordinate.

Um den letzten Punkt im aktuellen Unterpfad mit dem übergebenen Pfad zu verbinden, wird die lineTo()-Methode verwendet.
void lineTo(x, y)

Diese Methode erwartet ebenfalls zwei Parameter. Dabei gibt der erste Parameter die horizontale Koordinate des Zielpunkts an, während der zweite Parameter die vertikale Koordinate des Zielpunkts beschreibt.

Gezeichnet wird die Linie letztendlich über die stroke()-Methode.
void stroke()

Diese Methode erwartet keine Parameter.

Auf Basis der genannten Methoden und Attribute könnt ihr nun erste Linien zeichnen. Das könnte dann beispielsweise folgendermaßen aussehen:
function zeichnen() {
   var context = document.getElementById('meincanvas').getContext('2d');
   context.strokeStyle = "#000";
   context.beginPath();
   context.moveTo(5, 5);
   context.lineTo(100, 5);
   context.stroke();   
 }

So einfach könnt ihr also die canvas-Fläche mit Inhalten füllen bzw. dann in eurer App mit Inhalten füllen lassen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MicroSmurf
  • 07.08.2014 - 17:07

Sehr interessant wie immer. Vielen Dank.

Portrait von Steve007
  • 05.08.2014 - 10:31

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von AnneRick
  • 04.08.2014 - 12:38

Vielen dank fur das Tutorial.

Anne

Portrait von BOPsWelt
  • 27.07.2014 - 16:48

Danke für das Tutorial.

Portrait von Caesarion2004
  • 27.07.2014 - 15:07

Vielen Dank für den weiteren sehr informativen Teil!

Portrait von Lenka
  • 27.07.2014 - 13:51

Super Tutorial wieder mal! Danke!

Portrait von Kundentest
  • 27.07.2014 - 13:28

Herzlichen Dank für den weiteren Teil.

Portrait von Domingo
  • 27.07.2014 - 12:02

Auch 2. Teil find ich prima!

Portrait von Kundentest
  • 29.06.2014 - 19:12

Herzlichen Dank für den weiteren interessanten Teil.

Portrait von Stefan
  • 29.06.2014 - 12:21

Sehr schön! Weiter so.

Portrait von renate_C
  • 29.06.2014 - 11:10

Vielen Dank für das interessante Video und die Datei.

Portrait von Caesarion2004
  • 29.06.2014 - 11:06

Vielen Dank für den weiteren informativen Teil!

Portrait von Steve007
  • 29.06.2014 - 07:53

Vielen Dank für Dein interessantes Video - Training.

x
×
×