Lernleinwand

Jan 19 2023

Als nächstes haben wir das „html“-Element, das den Container für alle anderen Elemente auf der Seite darstellt. Es verfügt über ein „lang“-Attribut, das auf „en“ gesetzt ist und die Sprache des Dokuments angibt.

Sollte mit vscode vertraut sein
Sie sollten über grundlegende Kenntnisse in HTML, CSS und Javascript verfügen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

Innerhalb des „html“-Elements befindet sich das „head“-Element, das Metainformationen über das Dokument enthält, wie z. B. die Zeichenkodierung und den Titel des Dokuments. Wir haben ein „Meta“-Element, das das auf „UTF-8“ gesetzte „Charset“-Attribut enthält, das die Zeichenkodierung des Dokuments angibt. und „meta“-Element mit dem Attribut „http-equiv“ auf „X-UA-Compatible“ und dem Attribut „content“ auf „IE=edge“, die sicherstellen, dass die Seite in der neuesten Version von Internet Explorer gerendert wird. Wir haben auch ein „Meta“-Element, bei dem das Attribut „Name“ auf „Ansichtsfenster“ und das Attribut „Inhalt“ auf „Breite=Gerätebreite, Anfangsskalierung=1.0“ gesetzt ist, wodurch die Seite auf verschiedene Bildschirmgrößen reagiert.

Wir haben auch ein „link“-Element mit dem Attribut „rel“ auf „stylesheet“ und dem Attribut „href“ auf „styles.css“, das das CSS-Stylesheet mit dem HTML-Dokument verknüpft.

Der Titel des Dokuments wird im Element „title“ festgelegt.

Innerhalb des „body“-Elements haben wir ein „canvas“-Element mit einem „id“-Attribut, das auf „canvas1“ gesetzt ist, wo der JavaScript-Code die Animation zeichnet. Schließlich haben wir ein „script“-Element, dessen „src“-Attribut auf „script.js“ gesetzt ist. Dieses Element verknüpft die JavaScript-Datei mit dem HTML-Dokument.

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('2d');

const FRAME_WiDTH = canvas.width = 600;
const FRAME_HEIGHT = canvas.height = 600;

console.log(context);

const PLAYERIMAGE = new Image();
PLAYERIMAGE.src = 'img/shadow_dog.png';

// custom function
let x = 0;
function animate(){
    context.clearRect(0, 0, FRAME_WiDTH, FRAME_HEIGHT);
    context.fillRect(x,100,100,100);
    context.drawImage(PLAYERIMAGE, 50, 50,)

    requestAnimationFrame(animate);
};

animate();

Als Nächstes definieren wir zwei Konstanten, „FRAME_WIDTH“ und „FRAME_HEIGHT“, die auf die Breite bzw. Höhe des Canvas-Elements festgelegt werden. Wir verwenden auch die Funktion „console.log“, um die Kontextvariable an die Konsole auszugeben.

Danach erstellen wir ein neues Image-Objekt und speichern es in der Konstante „PLAYERIMAGE“. Anschließend setzen wir die Eigenschaft „src“ dieses Bildobjekts auf den Pfad einer Bilddatei.

Wir erstellen außerdem eine benutzerdefinierte Funktion namens „animate“. Diese Funktion wird wiederholt in einer Schleife mit der Methode „requestAnimationFrame“ aufgerufen. Innerhalb der Animate-Funktion verwenden wir zunächst die Methode „clearRect“, um die gesamte Leinwand zu löschen. Dann verwenden wir die Methode „fillRect“, um ein Rechteck an den x- und y-Koordinaten von (x, 100) mit einer Breite und Höhe von 100 Pixeln zu zeichnen. Danach verwenden wir die Methode „drawImage“, um das „PLAYERIMAGE“ an den x- und y-Koordinaten von (50, 50) auf die Leinwand zu zeichnen.

Zuletzt rufen wir einmal die Funktion „animate“ auf, um die Animationsschleife zu starten. Und die x-Variable wird bei jeder Schleife aktualisiert, um den Animationseffekt zu erzielen.

Lernleinwand

Fortsetzung folgt: Ich werde den Code und das Projekt schrittweise erweitern.