Canevas d'apprentissage

1. Doit être familier avec vscode
2. devrait avoir une compréhension de base de HTML, CSS et javascript

<!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>

Ensuite, nous avons l'élément "html", qui est le conteneur de tous les autres éléments de la page. Il a un attribut "lang" défini sur "en" qui spécifie la langue du document.

À l'intérieur de l'élément "html", nous avons l'élément "head", qui contient des méta-informations sur le document, telles que l'encodage des caractères et le titre du document. Nous avons l'élément "meta" qui contient l'attribut "charset" défini sur "UTF-8" qui spécifie l'encodage des caractères du document. et l'élément "meta" avec l'attribut "http-equiv" défini sur "X-UA-Compatible" et l'attribut "content" défini sur "IE=edge" qui garantissent que la page est rendue dans la dernière version d'Internet Explorer. Nous avons également un élément "meta" avec l'attribut "name" défini sur "viewport" et l'attribut "content" défini sur "width=device-width, initial-scale=1.0", ce qui rend la page réactive à différentes tailles d'écran.

Nous avons également un élément "link" avec l'attribut "rel" défini sur "stylesheet" et l'attribut "href" défini sur "styles.css" qui relie la feuille de style CSS au document HTML.

Le titre du document est défini dans l'élément "title".

À l'intérieur de l'élément "body", nous avons un élément "canvas" avec un attribut "id" défini sur "canvas1", où le code JavaScript dessinera l'animation. Enfin, nous avons un élément "script" avec l'attribut "src" défini sur "script.js", cet élément relie le fichier JavaScript au document HTML.

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();

Ensuite, nous définissons deux constantes, "FRAME_WIDTH" et "FRAME_HEIGHT", qui sont respectivement définies sur la largeur et la hauteur de l'élément canvas. Nous utilisons également la fonction "console.log" pour envoyer la variable de contexte à la console.

Après cela, nous créons un nouvel objet Image et le stockons dans la constante "PLAYERIMAGE". Nous définissons ensuite la propriété "src" de cet objet image sur le chemin d'un fichier image.

Nous créons également une fonction personnalisée appelée "animate", cette fonction sera appelée à plusieurs reprises dans une boucle à l'aide de la méthode requestAnimationFrame. Dans la fonction d'animation, nous utilisons d'abord la méthode "clearRect" pour effacer tout le canevas. Ensuite, nous utilisons la méthode "fillRect" pour dessiner un rectangle aux coordonnées x, y de (x, 100), avec une largeur et une hauteur de 100 pixels. Après cela, nous utilisons la méthode "drawImage" pour dessiner le "PLAYERIMAGE" sur le canevas aux coordonnées x et y de (50, 50).

Enfin, nous appelons la fonction "animer" une fois pour démarrer la boucle d'animation. Et la variable x sera mise à jour à chaque boucle pour créer l'effet d'animation.

A suivre, je vais progressivement faire évoluer le code et le projet.