taralino

Das Canvas-Paket

Das Canvas-Paket ist das Herzstück der taralino-Bibliothek - insbesondere wenn es um den Einstieg in die textbasierte Programmierung geht. Es bietet die Möglichkeit, Skizzen und Abbildungen einfach und schnell erstellen zu können, um beispielsweise grundlegende Konzepte der Programmierung zu visualisieren.

Die vollständige Dokumentation findest du hier:

Zur Referenz

Beispiel

Es wird eine Canvas-Zeichenfläche initialisiert. Anschließend wird ein Kreis gezeichnet und ein Text gesetzt.

<!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(10, 6, 5, {fill:"blue"});
Canvas.text(10, 6, "Hello world!", {fill:"white"});

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

Vorschau Download Kopie speichern

Beispiel

Es wird eine Canvas-Zeichenfläche initialisiert und anschließend ein Eis skizziert. Beachte die unterschiedlichen Möglichkeiten zur Definition von Farben.

<!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,6], {width:480, background:"#f2f2f2"});
Canvas.rect(5.0, 1.5, 0.6, 2.0, {fill:"#d09b94"});
Canvas.circle(5.0, 4.5, 1.0, {fill:"orange"});
Canvas.rect(5.0, 3.2, 2.0, 2.6, {fill:"orange"});
Canvas.rect(5.0, 3.6, 2.0, 1.2, {fill:"yellow"});
Canvas.rect(5.0, 2.4, 2.0, 1.2, {fill:"red"});
Canvas.rect(5.6, 3.3, 0.3, 2.4, {fill:[0,0,0,30]});

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

Vorschau Download Kopie speichern