taralino

Das Canvas-Paket

Das Canvas-Paket bietet eine Reihe von Befehlen, um Skizzen und Abbildungen möglichst einfach und schnell erstellen zu können. Gezeichnet werden können einfache Formen wie Kreise, Rechtecke und Linien.

Um Formen zeichnen zu können, ist zunächst die Zeichenfläche zu initialisieren:

Canvas.init(x, y)

Der Befehl initialisiert die Canvas-Zeichenfläche. Dabei definieren die beiden verpflichtenden Argumente x und y die Bereiche der x- und y-Achse der Zeichenfläche (jeweils als Intervall).

Als Eigenschaften können beispielsweise die Größe der Darstellung mittels width sowie die Hintergrundfarbe mittels background spezifiziert werden.

Zur Referenz

Beispiel

Initialisierung der Canvas-Zeichenfläche und anschließende Darstellung dreier Kreise.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,20], [0,12], {width:480, background:"yellow"});

Canvas.circle( 4, 6, 2, {fill:"red", stroke:"black"});
Canvas.circle(10, 6, 2, {fill:"green", stroke:"black"});
Canvas.circle(16, 6, 2, {fill:"blue", stroke:"black"});

</script>
</body>
</html>

Vorschau Download Kopie speichern

Formen zeichnen

Nach der Initialisierung lassen sich unterschiedliche geometrische Formen zeichnen, beispielsweise Kreise wie im Beispiel zuvor bereits verwendet:

Canvas.circle(x, y, r)

Der Befehl dient zum Zeichnen eines Kreises.

Übergeben werden drei verpflichtende Argumente jeweils als (rationale) Zahl: x- und y-Koordinaten des Mittelpunkts sowie Radius r.

Als Eigenschaften kann die Farbe der Füllung mittels fill sowie die Farbe der Kreislinie mittels stroke spezifiziert werden.

Zur Referenz

Neben Kreisen bietet das Canvas-Paket natürlich noch weitere Möglichkeiten zum Zeichnen von Formen wie Rechtecke und Linien. Eine Übersicht sämtlicher Befehle findest du hier:

Zur Referenz

Du solltest nun in der Lage sein, anhand der Befehlsreferenz eigenständig auch andere Formen zu verwenden.