Rechtecke und Text

April 2023

Rechtecke

Zum schnellen Darstellen von Rechtecken gibt es die Methoden
  • fillRect() - gefülltes Rechteck zeichnen
  • strokeRect() - Rechteck mit Rahmen zeichnen
  • clearRect() - Leeren einer rechteckigen Fläche
Die Parameter sind bei allen Methoden in dieser Reihenfolge:
x,y (Startpunkt), Breite, Höhe (in Pixeln)
Sie tanzen insofern aus der Reihe, als dass diese Methoden den aktiven Pfad nicht bearbeiten; sie sind direkt an den Zeichenkontext gebunden. Sie rendern sich selbst, hinterlassen ihre Darstellung auf der Canvas und fertig. 
Ctx2d.fillStyle = "rgba(0, 255, 0)";
 // gefülltes Rechteck
Ctx2d.fillRect(10, 10, 75, 75);
Ctx2d.strokeStyle = "rgba(0,0,255)";
// gerahmtes Rechteck
Ctx2d.strokeRect(60, 30, 75, 75);
Ctx2d.clearRect(30, 40, 50, 25); // Bereich löschen
Das Beispiel zu Rechtecken hier zum Anschauen.
Es ist auch möglich, ein Rechteck im aktiven Pfad dazustellen, dann aber mit der dafür vorgesehen Methode rect().

Text

Zum Einfügen von Text gibt es die Methoden
  • fillText() - Zeichen werden voll ausgeschrieben
  • strokeText() - Zeichen werden umrandet dargestellt.
Die Parameter sind in der Reihenfolge:
'darzustellender Text', x,y (Startkoordinaten), maximale Breite in Pixeln (optional).
Auch diese Methoden gehören direkt zum Zeichenkontext und nicht zum Pfad.
Zum Stylen des Textes gibt es die Methode font(), als Parameter ist ist eine Zeichenkette mit font-Werten wie in Kurzschreibweise (shorthand) wie in CSS. Voreingestellt ist '10px sans-serif'. 
Ctx2d.font = '1pc serif';
Ctx2d.fillText('Hallo Welt !', 10, 20);

Ctx2d.font = '80px sans-serif';
Ctx2d.strokeStyle = 'blue';
// der folgende Text wird auf die Breite 190 gestaucht
Ctx2d.strokeText('Outline -Text', 5, 100, 190);
Ist der Text länger als die angegebene maximale Breite, dann wird er gestaucht bis er passt
- ein wunderbares Feature!
Das Beispiel zu Rechtecken und Text hier zum Anschauen.