2D Zeichnen

Auf ein im HTML-Quelltext angelegtes <canvas>-Element wird im Javascript-Quelltext gewöhnlich über DOM-Funktionen zugegriffen (z.B. mit einer ID).

HTML<canvas id="myCanvas" width="400" height="150"></canvas>

Einfache Pfade

Pfade wie Linien und Kreisbögen geben in der 2D-Umgebung die Möglichkeit beliebige ausgefüllte und/oder unrandete Formen zu zeichnen :

Zeichen Eigenschaft/Methode	Beschreibung
`beginPath()`	Neuen Pfad mit neuem Style beginnen
`moveTo(x, y)`	Cursor ohne zu Zeichnen zu x/y bewegen
`lineTo(x, y)`	Cursor nach x/y bewegen und dabei Linie zeichnen
`arc(x, y, radius, startAngle, endAngle, counterclockwise=false)`	Cursor im Kreis um x/y mit radius bewegen von start zu endWinkel (Bogenmaß) in angegebene Richtung und dabei Bogen zeichnen
`closePath()`	optional, zum Anfangspunkt zurück zeichnen
`stroke()`	Kontur des Pfads mit aktuellem `strokeStyle` zeichnen
`fill()`	Pfad mit aktuellem `fillStyle` füllen
`fillStyle`, `strokeStyle`	CSS Farbwert, Verlauf, oder Muster für Füllung oder Striche

Das Koordinatensystem der Zeichenfunktionen hat seinen Ausgangspunkt (0,0) links oben, die x-Achse verläuft nach rechts und die y-Achse nach unten:

JavaScript// get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// triangle
const h = 2 / Math.sqrt(3);
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(25, 125);
ctx.lineTo(25 + 100 * h, 125);
ctx.lineTo(25 + 50 * h, 25);
ctx.closePath(); // return to beginning of path
ctx.stroke();

// circle
ctx.beginPath();
ctx.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.fill();

Offene Kreisbögen

JavaScript// get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// draw pacman
ctx.beginPath();
ctx.moveTo(75, 75);
ctx.arc(75, 75, 50, -0.5, 2 * Math.PI + 0.5, true);
ctx.closePath();
ctx.fillStyle = '#000';
ctx.fill();

// draw smiley
ctx.beginPath();
ctx.arc(200, 75, 50, 0, 2 * Math.PI, true); // outer circle
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.moveTo(235, 75);
ctx.arc(200, 75, 35, 0, Math.PI, false); // mouth (clockwise)
ctx.moveTo(190, 65);
ctx.arc(185, 65, 5, 0, 2 * Math.PI, true); // left eye
ctx.moveTo(220, 65);
ctx.arc(215, 65, 5, 0, 2 * Math.PI, true); // right eye
ctx.stroke();

Rechtecke

Zum Zeichnen von Rechtecken bietet die 2D-Umgebung eine Reihe vereinfachter Funktionen:

Funktion	Beschreibung
`fillRect(x, y, breite, höhe)`	zeichnet ein ausgefülltes Rechteck
`strokeRect(x, y, breite, höhe)`	zeichnet einen Rechteckrahmen
`clearRect(x, y, breite, höhe)`	macht gegebenen rechteckigen Bereich transparent

JavaScript// get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// square
ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(150, 25, 100, 100);

Komplexe Pfade und Text

Weitere Funktionen erlauben das Umranden und Ausfüllen komplexer Formen und das Zeichnen von Text:

JavaScript// get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// draw heart
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(75, 45);
ctx.bezierCurveTo(75, 45, 75, 25, 50, 25);
ctx.bezierCurveTo(25, 25, 25, 55, 25, 55);
ctx.bezierCurveTo(25, 75, 45, 95, 75, 125);
ctx.bezierCurveTo(105, 95, 125, 75, 125, 55);
ctx.bezierCurveTo(125, 55, 125, 25, 100, 25);
ctx.bezierCurveTo(75, 25, 75, 45, 75, 45);
ctx.fill();

// draw speech ballon
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(200, 25);
ctx.quadraticCurveTo(150, 25, 150, 62.5);
ctx.quadraticCurveTo(150, 100, 175, 100);
ctx.quadraticCurveTo(175, 120, 200, 125);
ctx.quadraticCurveTo(185, 120, 190, 100);
ctx.quadraticCurveTo(250, 100, 250, 62.5);
ctx.quadraticCurveTo(250, 25, 200, 25);
ctx.stroke();

// draw text
ctx.fillStyle = 'black';
ctx.font = '25px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('Hello!', 200, 70);