• Zeichnen mit Javascript
  • anonym
  • 30.06.2020
  • Mittlere Reife
Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.
1
Heute zeichnen wir mit Javascript. Dazu benötigen wir ein sogenanntes canvas Element (auf deutsch: Leinwand). Gehe hierzu wieder auf www.jsbin.com
  • 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()
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()
5
Kreis zeichnen

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.
x