... just another site around the web ...





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 Starpunktes 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 © 2017

Impressum