Canvas

Das HTML5 Element canvas kann mit Hilfe von JavaScript benutzt werden, um verschiedene Objekte zu zeichnen und zu animieren. Ein canvas-Element besitzt die Attribute width und height. Die vorgegebene Breite ist 300 px - die Höhe 150px. In diesem "Container" können Zeichnungen und Animationen definiert werden.

Folgende Objekte können mit Canvas dargestellt werden:

  • Rechtecke
  • Linien
  • Bogen/Kreise
  • Text
  • Bézierkurve
  • Bilder

Canvas Objekte

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>Canvas</title>
	</head>
	<body>
		<canvas></canvas>
		<script src="canvas.js"></script>
	</body>
</html>
index.html
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// Rechteck (x, y, width, height)
ctx.fillStyle = "#0082c8"; 
ctx.fillRect(200, 200, 100, 100);

// Linie (x, y)
ctx.beginPath();
ctx.moveTo(250, 100);
ctx.lineTo(250, 400);
ctx.moveTo(100, 250);
ctx.lineTo(400, 250);
ctx.strokeStyle = "#0082c8";
ctx.stroke();

// Bogen (x, y, radius, startWinkel(Bogenmaß), endWinkel(Bogenmaß), Uhrzeigersinn(true/false))
ctx.beginPath();
ctx.arc(250, 250, 100, Math.PI / 2, Math.PI * 2, false);
ctx.strokeStyle = "#666";
ctx.stroke();

// Text ("Text", x, y")
ctx.font = "bold 20px sans-serif";
ctx.fillStyle = "#000";
ctx.fillText("Canvas", 210, 250);
canvas.js

Animationen

Im folgenden Beispiel bewegt sich eine Kugel innerhalb eines Feldes hin und her. Sie überschreitet dabei nicht das Spielfeld.

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>Canvas Animation</title>
	</head>
	<body>
		<canvas></canvas>
		<script src="canvasanimation.js"></script>
	</body>
</html>
index.htlml
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


var y = 140;
var x = 100;
var xspeed = 3;
var yspeed = 1;
var r = 40;
function animate() {
	requestAnimationFrame(animate);
	ctx.clearRect(0, 0, innerWidth, innerHeight);
	
	ctx.beginPath();
	ctx.moveTo(30, 100);
	ctx.lineTo(300, 100);
	ctx.moveTo(300, 100);
	ctx.lineTo(300, 400);
	ctx.moveTo(300, 400);
	ctx.lineTo(30, 400);
	ctx.moveTo(30, 400);
	ctx.lineTo(30, 100);
	ctx.strokeStyle = "#0082c8";
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI * 2, false);
	ctx.strokeStyle = "#666";
	ctx.stroke();
	
	if (y + r > 400 || y - r < 100) {
		yspeed=-yspeed;
	}
	if (x + r > 300 || x - r < 30) {
		xspeed=-xspeed;
	}
	x+=xspeed;
	y+=yspeed;
}
	
animate();
canvasanimation.js

keyboard_arrow_left

Vorheriger Artikel

Arrays

Grundlagen, Mehrdimensionale Arrays

Werbung

Werbung

Mit Programmier-Skills perfekt für die Zukunft aufgestellt! Die Kurse gehen schon bei 11,99 € los!
Top-Online-Kurse in „IT & Software“