taralino

Grundlegendes Konzept

Bei der Verwendung der taralino Umfänge ist folgendes Konzept zu beachten:

Verpflichtende Argumente und optionale Eigenschaften

Alle taralino Befehle und Funktionen erwarten in der Regel verpflichtende Argumente sowie optionale Eigenschaften:

Verpflichtende Argumente sind Parameter, welche dem Befehl bzw. der Funktion zwingend übergeben werden müssen. Mehrere Argumente werden jeweils durch ein Komma voneinander getrennt.
Optionale Eigenschaften dienen der genaueren Spezifikation und werden innerhalb geschweifter Klammern angegeben (jeweils mit einem Bezeichner der Eigenschaft gefolgt von einem Doppelpunkt).

Es kommen Default-Werte (Standardeinstellungen) zum Einsatz, falls die optionalen Eigenschaften nicht explizit definiert werden.

Das Konzept von verpflichtenden Argumenten sowie optionalen Eigenschaften lässt sich anhand eines expliziten Befehls genauer verstehen:

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

Standardmäßig wird eine schwarze Füllung sowie eine Darstellung ohne Kreislinie verwendet.

Beispiel

Beispiel zum Zeichnen von Kreisen mit unterschiedlichen Optionen.

<!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:"lightgrey"});

Canvas.circle( 4.0, 6.0, 2.0);
Canvas.circle(10.0, 6.0, 2.4, {fill:"yellow", stroke:"blue"});
Canvas.circle(16.0, 6.0, 1.8, {fill:"none", stroke:"orange"});

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

Vorschau Download Kopie speichern

Beispiel

Mehrere Kreise, um einen Smiley zu zeichnen.

<!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:"black"});

Canvas.circle(10.0, 6.0, 5.0, {fill:"yellow"});

Canvas.circle(10.0, 5.6, 2.8, {fill:"black"});
Canvas.circle(10.0, 7.4, 3.4, {fill:"yellow"});

Canvas.circle(8.5, 7.8, 0.8, {fill:"black"});
Canvas.circle(11.5, 7.8, 0.8, {fill:"black"});

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Beispiel zuvor vertraut: Verändere die Farbe der Augen und setze dem Smiley eine Brille auf.