Płótno do nauki

1. Powinien znać vscode
2. powinien mieć podstawową wiedzę na temat HTML, CSS i 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>

Następnie mamy element „html”, który jest kontenerem dla wszystkich innych elementów na stronie. Ma atrybut „lang” ustawiony na „en”, który określa język dokumentu.

Wewnątrz elementu „html” znajduje się element „head”, który zawiera metainformacje o dokumencie, takie jak kodowanie znaków i tytuł dokumentu. Mamy element „meta”, który zawiera atrybut „charset” ustawiony na „UTF-8”, który określa kodowanie znaków dokumentu. oraz element „meta” z atrybutem „http-equiv” ustawionym na „X-UA-Compatible” i atrybutem „content” ustawionym na „IE=edge”, które zapewniają renderowanie strony w najnowszej wersji Internet Explorera. Mamy również element „meta” z atrybutem „name” ustawionym na „viewport” i atrybutem „content” ustawionym na „width=device-width, initial-scale=1.0”, co sprawia, że ​​strona reaguje na różne rozmiary ekranu.

Mamy również element „link” z atrybutem „rel” ustawionym na „stylesheet” i atrybutem „href” ustawionym na „styles.css”, który łączy arkusz stylów CSS z dokumentem HTML.

Tytuł dokumentu ustawia się w elemencie „tytuł”.

Wewnątrz elementu „body” mamy element „canvas” z atrybutem „id” ustawionym na „canvas1”, w którym kod JavaScript narysuje animację. Wreszcie mamy element „script” z atrybutem „src” ustawionym na „script.js”, ten element łączy plik JavaScript z dokumentem 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();

Następnie definiujemy dwie stałe „FRAME_WIDTH” i „FRAME_HEIGHT”, które są ustawione odpowiednio na szerokość i wysokość elementu canvas. Używamy również funkcji „console.log” do wyprowadzania zmiennej kontekstowej do konsoli.

Następnie tworzymy nowy obiekt Image i przechowujemy go w stałej „PLAYERIMAGE”. Następnie ustawiamy właściwość „src” tego obiektu obrazu na ścieżkę pliku obrazu.

Tworzymy również niestandardową funkcję o nazwie „animate”, która będzie wywoływana wielokrotnie w pętli przy użyciu metody requestAnimationFrame. Wewnątrz funkcji animate najpierw używamy metody „clearRect”, aby wyczyścić całe płótno. Następnie używamy metody „fillRect”, aby narysować prostokąt o współrzędnych x, y (x, 100) o szerokości i wysokości 100 pikseli. Następnie używamy metody „drawImage”, aby narysować „PLAYERIMAGE” na płótnie we współrzędnych x i y (50, 50).

Na koniec raz wywołujemy funkcję „animate”, aby rozpocząć pętlę animacji. A zmienna x będzie aktualizowana w każdej pętli, aby uzyskać efekt animacji.

Ciąg dalszy nastąpi, będę sukcesywnie rozwijał kod i projekt.