taralino

Zeichenfläche initialisieren

Neben Canvas.circle ist der folgende Befehl des Canvas-Pakets von zentraler Bedeutung, welchen wir in den Beispielen zuvor bereits verwendet haben:

Canvas.init(x, y)

Der Befehl initialisiert die Zeichenfläche. Dabei definieren die beiden verpflichtenden Argumente x und y die Bereiche der x- und y-Achse der Zeichenfläche (jeweils als Intervall).

Als Eigenschaften können beispielsweise die Größe der Darstellung mittels width sowie die Hintergrundfarbe mittels background spezifiziert werden.

Zur Referenz

Mit dem Konzept zur Definition der Größe der Zeichenfläche solltest du dich im Folgenden kurz vertraut machen.

Beispiel

Beispiel zur Definition (Initialisierung) einer 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,20], [0,12], {width:480, background:"yellow"});

Canvas.circle( 4, 6, 2, {fill:"red", stroke:"black"});
Canvas.circle(10, 6, 2, {fill:"green", stroke:"black"});
Canvas.circle(16, 6, 2, {fill:"blue", stroke:"black"});

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

Vorschau Download Kopie speichern

Aufgabe

Verändere die Größe der Zeichenfläche, indem die Intervalle verändert werden. Probiere unterschiedliche Möglichkeiten aus und beobachte, wie sich die Zeichenfläche anpasst. Wie verhalten sich beispielsweise die Kreislinien, wenn die Größe der Zeichenfläche verändert wird?

Canvas-Befehlsreferenz

Wir haben damit im Wesentlichen schon alle Konzepte des Canvas-Pakets erarbeitet. Aber natürlich bietet das Paket neben Kreisen auch noch weitere Möglichkeiten zum Zeichnen von Formen wie Rechtecke und Linien. Eine Übersicht sämtlicher Möglichkeiten findest du in der Befehlsreferenz:

Zur Referenz

Du solltest nun in der Lage sein, die Befehlsreferenz eigenständig zum Zeichnen beispielsweise eines Rechtecks zu verwenden.