Grafiken auf Canvas animieren
Wir können auch mit JavaScript und dem HTML <canvas>-Tag Animationen auf dem Canvas erstellen. Lassen Sie uns eine Animation eines sich bewegenden Rechtecks auf unserem Canvas erstellen.
<!doctype html>
<html>
<head>
<title>Animiertes Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rot";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>
Im obigen Code erhalten wir zunächst das Canvas-Element anhand seiner ID myCanvas, und dann erhalten wir einen 2D-Zeichnungskontext, indem wir getContext() verwenden. Wir deklarieren dann einige Variablen x und y, um die Position unseres Rechtecks zu speichern. Wir deklarieren auch die Variable dx, um das Rechteck entlang der x-Achse zu bewegen.
Wir erstellen dann eine Funktion animate(), um das Rechteck auf dem Bildschirm zu zeichnen. Wir verwenden die clearRect()-Methode, um die vorherigen Zeichnungen auf dem Canvas in jedem Frame zu löschen. Wir füllen dann das Rechteck mit einer roten Farbe, indem wir die fillRect()-Methode verwenden.
Wir überprüfen dann, ob das Rechteck die Grenzen des Canvas erreicht hat, und wenn ja, ändern wir die Bewegungsrichtung, indem wir den Wert von dx ändern.
Schließlich rufen wir die requestAnimationFrame()-Methode auf, um eine Schleife für die Animation zu erstellen.
Speichern Sie die Datei und aktualisieren Sie Ihren Browser, um das animierte Rechteck zu sehen.
