taralino

Farben und Transparenz

Als Erweiterung zur Farblehre aus dem Abschnitt zuvor bietet die taralino-Bibliothek auch Möglichkeiten an, um Farben mit einer gewissen Transparenz darzustellen. Dies geht jedoch nur, falls Farben als Datenfeld (RGB-Werte) oder als Hexadezimalcode definiert werden.

Farben als Datenfeld

Bei der Spezifikation einer Farbe als RGB-Wert kann (optional) auch eine vierte Zahl verwendet werden:

[ R, G, B, A ]

Genau wie R, G und B ist auch A eine Zahl zwischen 0 und 255, welche die Transparenz definiert. Dabei gilt 0 als nicht sichtbar (vollständige Transparenz) und 255 ohne Transparenz.

Hinweis: Das A steht für den griechischen Buchstaben Alpha, was häufig als Abkürzung für Transparenz verwendet wird.

Beispiel

Zur Definition von Transparenz 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,8], [0,2], {width:600, background:"lightgrey"});
Canvas.rect(4, 0.5, 8, 1, {fill:"blue"});

Canvas.circle(1.0, 1.0, 0.7, {fill:[224, 22, 34,  25]});
Canvas.circle(3.0, 1.0, 0.7, {fill:[224, 22, 34, 100]});
Canvas.circle(5.0, 1.0, 0.7, {fill:[224, 22, 34, 200]});
Canvas.circle(7.0, 1.0, 0.7, {fill:[224, 22, 34, 255]});

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

Vorschau Download Kopie speichern

Beispiel

Weiteres Beispiel zur Definition von Transparenz 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>

var x = 0;

function setup() {
  Canvas.init([-1.5,1.5], [-0.5,0.5], {width:640, background:[20,20,20]});
};

function loop() {
  x = 1.5 * time();
  Canvas.rect(0, 0, 3, 1, {fill:[10,10,10,10]});
  Canvas.circle(Math.sin(x), 0, 0.2, {fill:"yellow"});
};

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

Vorschau Download Kopie speichern

Farben als Hexadezimalcode

Auch beim Hexadezimalcode kann eine Transparenz spezifiziert werden:

#abcdefgh

Die Transparenz wird hier durch gh als Hexadezimalzahl definiert.

Beispiel

Zur Definition von Transparenz 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,8], [0,2], {width:600, background:"lightgrey"});
Canvas.rect(4, 0.5, 8, 1, {fill:"blue"});

Canvas.circle(1.0, 1.0, 0.7, {fill:"#e0162219"});
Canvas.circle(3.0, 1.0, 0.7, {fill:"#e0162264"});
Canvas.circle(5.0, 1.0, 0.7, {fill:"#e01622c8"});
Canvas.circle(7.0, 1.0, 0.7, {fill:"#e01622ff"});

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

Vorschau Download Kopie speichern