taralino

Grundlagen über Farben

An allen Stellen, an denen Farben Verwendung finden, bietet die taralino-Bibliothek weitreichende Möglichkeiten, diese zu spezifizieren.

Farben als Zeichenkette

Zunächst können 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 Datenfeld

Eine weitere Definitionsmöglichkeit sind RGB-Werte als Datenfeld:

[ 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 definiert.

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 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

Farben als Zahl

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

Argument	Datentyp	Hinweis
t	Zahl	zwischen 0 und 1

Dadurch lassen sich Farbverläufe darstellen.

Beispiel

Zur Definition eines Farbverlaufs.

<!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,0.4], {width:480, background:"lightgrey"});

for (var k = 0.0; k <= 1.0; k += 0.01) {
  Canvas.rect(k, 0.2, 0.01, 0.2, {fill:k});
};

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

Vorschau Download Kopie speichern