ReLast - Klassik

Canvas

Canvas stellt eine Zeichenfläche zur Verfügung, auf der wir mit Hilfe von JavaScript Zeichnungen erstellen können. Möglich sind Linien, Rechtecke, Kreise oder Text.

Hallo Welt in Canvas

<html>
	<head>
		<title>Canvas-Test</title>
	</head>
	<body>
		<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>
		<script>
			var canvas = document.getElementById('canvas');
			var c = canvas.getContext('2d');
			c.fillStyle = 'rgb(0,0,0)';
			c.font = "10px Arial";
			c.fillText("Hallo Welt!",x,y);
		</script>
	</body>
</html>

Grundlagen

Das Canvas-Element, die Zeichenfläche

<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>

Zugriff auf das Canvas-Element

<script>
	var canvas = document.getElementById('canvas');
	var c = canvas.getContext('2d');
	c.fillStyle = 'rgb(0,0,0)';
	c.font = "10px Arial";
	c.fillText("Hallo Welt!",x,y);
</script>

Farben definieren

Für die Farbauswahl benötigen wir eine Farbangabe. Die Farbe kann für Linien und Füllungen getrennt definiert werden.

c.fillStyle = 'rgb(0,0,0)';
c.strokeStyle = 'rgb(0,0,0)';

Geometrische Formen

Linien

Für eine Linie benötigen wir die Koordinaten (x,y) des Startpunktes und die Koordinaten (x,y) des Zielpunktes.

c.beginPath();
c.moveTo(x,y);
c.lineTo(x+10,y+10);
c.stroke();

Rechtecke

Für ein Rechteck benötigen wir die Koordinaten (x,y) sowie Breite und Höhe.

c.beginPath();
c.rect(x,y,width,height);
c.stroke();

Ein ausgefülltes Rechteck.

c.beginPath();
c.fillRect(x,y,width,height);

Kreise

Für einen Kreis benötigen wir die Koordinaten (x,y), den Radius sowie den Start-Winkel und End-Winkel (auch Teilkreise sind somit möglich).

c.beginPath();
c.arc(x,y,radius,startangle,endangle);
c.stroke();

Voller Kreis (360 Grad)

c.beginPath();
c.arc(x,y,r,0,2*Math.PI);
c.stroke();

Ausgefüllter voller Kreis

c.beginPath();
c.arc(x,y,r,0,2*Math.PI);
c.stroke();
c.fill();

Text

Für einen Text benötigen wir die Koordinaten (x,y) und den Stil in dem der Text dargestellt werden soll (Größe und Font).

c.font = "10px Arial";
c.fillText("Hallo Welt!",x,y);

Umrandeter Text ist ebenfall möglich.

c.font = "10px Arial";
c.strokeText("Hallo Welt!",x,y);

Copyright © 2025

Datenschutz | Impressum