10.1 Grundlagen der Arbeit mit Canvas
Canvas API bietet Entwicklern coole Tools zum Erstellen von 2D-Grafiken und Animationen in Webanwendungen. In dieser Vorlesung werden wir die Grundlagen der Arbeit mit der Canvas API betrachten, einschließlich der Erstellung von Elementen, Zeichnen von Grafiken und Erstellen von Animationen.
Erstellen eines <canvas>-Elements
Das <canvas>-Element in HTML wird verwendet, um eine Zeichenfläche zu erstellen, auf der man
verschiedene Grafikoperationen ausführen kann:
<canvas id="myCanvas" width="800" height="600"></canvas>
Erhalten des Zeichenkontexts
Um Zeichenoperationen auf einem <canvas>-Element auszuführen, muss der Zeichenkontext abgerufen werden.
Für 2D-Grafiken wird der 2D-Kontext verwendet:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Zeichnen auf Canvas
1. Rechtecke
Canvas API bietet Methoden zum Zeichnen von gefüllten und umrandeten Rechtecken.
Gefülltes Rechteck — fillRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Umrandetes Rechteck — strokeRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Bereich löschen
Die Methode clearRect wird verwendet, um einen bestimmten Bereich zu löschen:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Linien
Um Linien zu zeichnen, wird die Methode beginPath zum Starten eines neuen Pfades und die Methoden moveTo und
lineTo zur Festlegung der Linienkoordinaten verwendet:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Kreise und Bögen
Die Methode arc wird zum Zeichnen von Kreisen und Bögen verwendet:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Text
Die Methoden fillText und strokeText werden zum Zeichnen von Text verwendet:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. Farbverläufe
Canvas API unterstützt die Erstellung von linearen und radialen Farbverläufen.
Linearer Farbverlauf:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Radialer Farbverlauf:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Bilder
Die Methode drawImage wird zum Zeichnen von Bildern auf Canvas verwendet:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Animationen auf Canvas
Um Animationen zu erstellen, wird die Methode requestAnimationFrame verwendet, die die angegebene Funktion
zur Darstellung eines neuen Animationsframes aufruft.
1. Grundlagen der Animation
Beispiel einer einfachen Animation:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Komplexe Animationen
Beispiel einer Kreisanimation:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Verwendung von Timern
Um Animationen zu erstellen, können auch die Methoden setInterval und setTimeout verwendet werden.
Beispiel einer Animation mit setInterval:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION