Erste Schritte mit Canvas in JavaScript
Canvas ist ein spezielles Zeichenfeld
im Browser mit JavaScript. Dieses Feld wird
mit dem Tag <canvas> erstellt, dem
man eine Breite und Höhe zuweisen sollte:
<canvas width="200" height="200"></canvas>
Um mit diesem Feld in JavaScript zu arbeiten, müssen wir zunächst eine Referenz auf diesen Tag in einer Variable erhalten:
let canvas = document.querySelector('canvas');
Anschließend muss auf diese Variable die
Methode getContext angewendet werden:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Man kann es vereinfachen:
let ctx = document.querySelector('canvas').getContext('2d');
Als Ergebnis wird in die Variable ctx
ein Objekt geschrieben, das den sogenannten
Ausführungskontext enthält. Das gesamte Zeichnen
erfolgt mit den Methoden dieses
Objekts. Deren Studium werden wir in den folgenden
Lektionen behandeln.
