taralino

Projektaufgabe Canvas

Um die zuvor erlernten Konzepte und Befehle zu vertiefen sowie zu festigen, solltest du folgende Aufgabe bearbeiten.

Wähle einige der Bilder zuvor aus und versuche, diese unter Verwendung des Canvas-Pakets zu zeichnen. Natürlich kannst du die Bilder auch lediglich als Inspiration ansehen und andere Figuren zeichnen.

Tipp

Vor dem Schreiben des Quellcodes kann es äußerst hilfreich sein, sich auf Karopapier einfach Skizzen anzufertigen. Wie dies aussehen kann, demonstriert die folgende Abbildung:

Zunächst sollten die Formen der zu zeichnenden Abbildung auf Karopapier skizziert werden, um die Mittelpunkte und Größen einfacher bestimmen zu können. Der Quellcode mit den zugehörigen Zahlenwerten sollte erst anschließend geschrieben werden.

Beispiel

Quellcode, nachdem die Zeichenfläche wie in der Abbildung zuvor auf Karopapier geplant wurde.

<!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(4, 7, 3, {fill:"blue"});
Canvas.box(4, 4, 6, {fill:"blue"});
Canvas.circle(3, 8, 0.5, {fill:"white"});
Canvas.circle(5, 8, 0.5, {fill:"white"});

Canvas.rect(10, 5, 2, 8, {fill:"green"});
Canvas.circle(10, 9, 2, {fill:"yellow", stroke:"red"});
Canvas.circle(10, 9, 1, {fill:"white", stroke:"orange"});

Canvas.circle(16, 4, 3, {fill:"cyan", stroke:"violet"});
Canvas.box(16, 7, 4, {fill:"lightgrey", angle:Math.PI/4});

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

Vorschau Download Kopie speichern

Beispiel

Du kannst das folgende Beispiel ergänzen, um die Projektaufgabe zu bearbeiten.

<!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"});

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

Vorschau Download Kopie speichern