Aufgabenstellung "AFFE"

Beispiel für Zeichnen auf dem Canvas. Zeige, dass Du mit Koordinaten, Variablen, Funktionen, Schleifen und Zufallszahlen umgehen kannst.

by bjelline

HTML

<h1>Aufgabenstellung</h1>
<p>Schreibe ein Programm, das 10mal das  Wort "AFFE" zeichnet,
    und zwar an zufälliger Position</p>


<canvas id="c"></canvas>
<p>Tipp: Das Koordinatensystem des Canvas startet links oben.</p>
<p>Tipp: Drücke links oben auf "Run" und das vorhandene Programm neu zu starten.</p>

CSS

#c { 
    background-color: white 
}
body {
    background-color: #ddd;
}

JavaScript

var my_canvas = document.getElementById("c");
var my_context = my_canvas.getContext("2d");

my_canvas.width = 250;
my_canvas.height = 250;


//
// Diese paar Zeilen zeichnen zwei Linien.
// bitte aus dem endgültigen Programm dann löschen
//


my_context.moveTo(0, 0);
my_context.lineTo(250, 20);

my_context.moveTo(100, 100);
my_context.lineTo(0, 20);
my_context.stroke();

//
// eine Funktion die ein A zeichnet
// als argumente: 
//    x1,y1 ist das linke obere Eck,
//    i ist die Zeilenhöhe.   

function a(c, x1, y1, i) {
    c.moveTo(x1, y1+i);
    c.lineTo(x1+i/2, y1);
    c.lineTo(x1+i, y1+i);
    c.moveTo(x1+i/4, y1+i/2);
    c.lineTo(x1+3*i/4, y1+i/2);
    c.stroke();
}

//
// a aufrufen und an einer fixen position zeichnen
//

a(my_context, 150,50,30);

a(my_context, 100,150,50);
//
// zwei zufallszahlen zwischen 0 und 200 erzeugen
//

x_zufall=Math.random()*200;
y_zufall=Math.random()*200;

//
// a mit den zufalls-koordinaten aufrufen.
//

a(x_zufall,y_zufall,50);