Heute zeichnen wir mit Javascript. Dazu benötigen wir ein sogenanntes canvas Element (auf deutsch: Leinwand). Gehe hierzu wieder auf www.jsbin.com
1
- Am Anfang benötigst du die Ansichten HTML und Output. Alles andere kannst du ausblenden.
- Füge im HTML Code folgende Zeile zwischen die beiden <body> tags. Alle Elemente die hier dazwischen stehen werden in der Output Ansicht angezeigt. So erzeugen wir unsere 'Leinwand'.
<canvas id=meinCanvas
height="500" width="500" style="border:3px solid grey"></canvas>
Diese sollte nun erscheinen. Experimente mit den Werten für height, width und border und schau was passiert.
2
Du kannst nun die HTML Ansicht ausblenden und stattdessen die Javascript Ansicht einblenden.
- Zuerst müssen wir unser canvas Element in einer Variable speichern, damit wir gleich damit zeichnen können. Das geht wie folgt:
var leinwand = document.getElementById('meinCanvas').getContext('2d') - Jedes mal wenn wir anfangen ein neues Objekt zu zeichnen schreiben wir:
leinwand.beginPath() - Du kannst die Farbe des Striches wie folgt festlegen z.b. grün:
leinwand.strokeStyle='green' und die Farbe der Füllung mit leinwand.fillStyle='blue'
3
Striche zeichnen:
Du kannst die den Stift an einen bestimmten Punkt bewegen mit leinwand.moveTo(x,y) wobei x und y jeweils für die Koordinaten stehen (siehe Grafik rechts).
Du kannst einen Strich von der momentanen Position aus zeichnen mit leinwand.lineTo(x,y)
Um diese Linie auch wirklich sichtbar zu machen schreibe noch: leinwand.stroke()
Du kannst die den Stift an einen bestimmten Punkt bewegen mit leinwand.moveTo(x,y) wobei x und y jeweils für die Koordinaten stehen (siehe Grafik rechts).
Du kannst einen Strich von der momentanen Position aus zeichnen mit leinwand.lineTo(x,y)
Um diese Linie auch wirklich sichtbar zu machen schreibe noch: leinwand.stroke()
Canvas Koordinatensystem
4
Viereck zeichnen
Zeichne ein Viereck mit leinwand.rect(x,y, breite, höhe) z.b. leinwand.rect(20,10, 200, 50) zeichnet ein Rechteck an Position (20,10) mit breite 200 und Höhe 50.
Nicht vergessen: leinwand.stroke()
Möchtest du das Viereck mit Farbe füllen: leinwand.fill()
Zeichne ein Viereck mit leinwand.rect(x,y, breite, höhe) z.b. leinwand.rect(20,10, 200, 50) zeichnet ein Rechteck an Position (20,10) mit breite 200 und Höhe 50.
Nicht vergessen: leinwand.stroke()
Möchtest du das Viereck mit Farbe füllen: leinwand.fill()
5
Kreis zeichnen
Zeichne einen Kreis mit leinwand.arc(x, y, radius, 0, 2*Math.PI)
Zeichne einen Kreis mit leinwand.arc(x, y, radius, 0, 2*Math.PI)
6
Zeichne etwas cooles! Nutze auch eine for-Schleife um 1000 Objekte auf einmal zu zeichnen.
Lizenzhinweis
Alle Bestandteile dieses Materials sind frei oder unlizenziert. Klicken Sie auf einen Baustein, um die Lizenz zu sehen.
