MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

Präsentation zum Thema: "MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite."—  Präsentation transkript:

1 MAYA K. Canvas-Projekt

2 In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite Randlinie soll 1px haben Und schwarz sein

3 Das Kreuz soll im crosshair Stil sein Wenn sich die maus bewegt, soll die funktion drawLine (event) passieren Wenn die Maus gedrückt wird, soll die funcktion startdraw passieren

4 Wenn die Maus nicht mehr gerdrückt wird, soll die Funktion stopDraw passieren. Das sollte nicht angezeigt werden (nur wen Browser Canvas nicht unterstützt) Das kommt alles noch in den öffnenden Canvas tag!

5 Hier beginnt ein js Text Eine variable wird erstellt mit „var“ Wenn ich zeichne dann wird die variable true wenn ich loslasse wird sie wieder false Damit greift man auf das canvas Element zu

6 Im 2 dimensionalen Bereich wird gezeichnet Der context, zeigt dem browser was er eigentlich tun soll.

7 Funktion, wenn die Maus sich beweget (eine Linie soll gezeichnet werden.) Wenn man zeichnet kommt die Variable draw zum einsatz (mit dem ==  heißt es wird vergleichen) X und Y Koordinaten der Maus (somit kann ich überall im Feld zeichnen) So breit soll die Linie sein

8 Die Linie soll sowohl auf der X Achse als auch auf der Y Achse gezogen werden- also dort wo die Maus sich befindet. stroke  einfache Linien zeichnen fill  Linien werden gefüllt

9 Hier wird der Startpunkt gesetzt Die Linie soll sich BEWEGEN nach X und Y. Diese function soll passieren wenn gezeichnet wird

10 Es soll aufgehört werden zu zeichnen Nicht näher definiert- weil nur aufgehört wird zu zeichnen „Schalter“ wird wieder umgelegt auf false