taralino

Grundlagen über Farben

An sämtlichen Stellen, an denen Farben Verwendung finden (z.B. im Canvas- sowie im Grid-Paket), bietet die taralino-Bibliothek unterschiedliche Möglichkeiten an, diese zu spezifizieren. Dieser Abschnitt bietet eine kurze Übersicht der Möglichkeiten.

Farben als Zeichenkette

Wie bislang verwendet, können ausgewählte Farben als Zeichenkette definiert werden, zum Beispiel:

Zeichenkette	Farbe
red	Rot
green	Grün
blue	Blau

Eine Liste sämtlicher vordefinierter Farben ist folgende:

Eine besondere Rolle nimmt die folgende Angabe ein:

Zeichenkette	Farbe
none	transparent (ohne Farbe)

Dies wird benötigt, um beispielsweise nur die Kontur einer Form (ohne Füllung) definieren zu können.

Beispiel

Zur Definition von Farben als Zeichenkette.

<!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,4], [0,4], {width:300, background:"lightgrey"});
Canvas.circle(1.0, 1.0, 0.7, {fill:"red"});
Canvas.circle(3.0, 1.0, 0.7, {fill:"pink"});
Canvas.circle(1.0, 3.0, 0.7, {fill:"yellow"});
Canvas.circle(3.0, 3.0, 0.7, {fill:"none", stroke:"orange"});

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

Vorschau Download Kopie speichern

Farben als Zahl

In einigen Anwendungsfällen mag es sinnvoll sein, eine Art Farbverlauf ähnlich zum Regenbogen zu verwenden. Hierzu genügt es, eine einzelne Zahl anzugeben:

Argument	Datentyp	Hinweis
t	Zahl	zwischen 0 und 1

Dadurch lassen sich Farbverläufe darstellen.

Beispiel

Zur Definition von Farben als Zahl.

<!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.1,1.1], [-0.1,0.1], {width:640, background:"lightgrey"});

for (var k = 0.0; k <= 1.0; k += 0.03125) {
  Canvas.circle(k, 0.0, 0.04, {fill:k});
};

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

Vorschau Download Kopie speichern

Beispiel

Weiteres Beispiel zur Definition von Farben als Zahl: Bewege den Mauszeiger über die Zeichenfläche.

<!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,10], [0,5], {width:600, background:"lightgrey"});
Canvas.text(5, 2.5, "Bewege die Maus hier.");

function on_mouse_move(x, y) {
  var c = time() % 1;
  Canvas.circle(x, y, 0.2, {fill:c});
};

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

Vorschau Download Kopie speichern

Farben als Datenfeld

Eine weitere Möglichkeit sind sogenannte RGB-Werte, also ein Datenfeld bestehend aus drei Zahlen:

[ R, G, B ]

Dabei sind R, G und B jeweils Zahlen zwischen 0 und 255, welche den Rot-, Grün- bzw. Blau-Anteil der Farbe definieren.

Die folgende Abbildung veranschaulicht, welche Farben beim "Mischen" der RGB-Werte entstehen:

Beispielsweise ergibt ein "Mischen" von R und G die Farbe Gelb.

Beispiel

Zur Definition von Farben als Datenfeld.

<!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,4], [0,4], {width:300, background:"lightgrey"});
Canvas.circle(1.0, 1.0, 0.7, {fill:[224, 22, 34]});
Canvas.circle(3.0, 1.0, 0.7, {fill:[246, 100, 204]});
Canvas.circle(1.0, 3.0, 0.7, {fill:[254, 200, 6]});
Canvas.circle(3.0, 3.0, 0.7, {fill:"none", stroke:[255, 132, 33]});

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

Vorschau Download Kopie speichern

Farben als Hexadezimalcode

Für Anwender, die sich mit dem Hexadezimalcode auskennen, können die RGB-Werte auch in verkürzter Schreibweise und als Zeichenkette beginnend mit # angegeben werden:

#abcdef

ab, cd und ef sind jeweils Rot-, Grün- bzw. Blau-Anteil der Farbe als Hexadezimalzahl.

Beispiel

Zur Definition von Farben als Hexadezimalcode.

<!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,4], [0,4], {width:300, background:"lightgrey"});
Canvas.circle(1.0, 1.0, 0.7, {fill:"#e01622"});
Canvas.circle(3.0, 1.0, 0.7, {fill:"#f664cc"});
Canvas.circle(1.0, 3.0, 0.7, {fill:"#fec806"});
Canvas.circle(3.0, 3.0, 0.7, {fill:"none", stroke:"#ff8421"});

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

Vorschau Download Kopie speichern