Учебный холст

Jan 19 2023

Далее у нас есть элемент «html», который является контейнером для всех остальных элементов на странице. У него есть атрибут «lang», установленный на «en», который указывает язык документа.

Должен быть знаком с vscode
должен иметь базовые знания HTML, CSS и 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>

Внутри элемента «html» у нас есть элемент «head», который содержит метаинформацию о документе, такую как кодировка символов и заголовок документа. У нас есть элемент «meta», который содержит атрибут «charset», установленный в «UTF-8», который указывает кодировку символов документа. и элемент «meta» с атрибутом «http-equiv», установленным на «X-UA-Compatible», и атрибутом «content», установленным на «IE=edge», что гарантирует отображение страницы в последней версии Internet Explorer. У нас также есть элемент «meta» с атрибутом «name», установленным на «viewport», и атрибутом «content», установленным на «width=device-width, initial-scale=1.0», что делает страницу отзывчивой к разным размерам экрана.

У нас также есть элемент «link» с атрибутом «rel», установленным на «stylesheet», и атрибутом «href», установленным на «styles.css», который связывает таблицу стилей CSS с HTML-документом.

Название документа задается в элементе title.

Внутри элемента «body» у нас есть элемент «canvas» с атрибутом «id», установленным на «canvas1», где код JavaScript будет рисовать анимацию. Наконец, у нас есть элемент «script» с атрибутом «src», установленным на «script.js», этот элемент связывает файл JavaScript с документом 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();

Затем мы определяем две константы, «FRAME_WIDTH» и «FRAME_HEIGHT», которые задают ширину и высоту элемента холста соответственно. Мы также используем функцию console.log для вывода переменной контекста на консоль.

После этого мы создаем новый объект изображения и сохраняем его в константе «PLAYERIMAGE». Затем мы устанавливаем свойство «src» этого объекта изображения на путь к файлу изображения.

Мы также создаем пользовательскую функцию под названием «animate», эта функция будет вызываться многократно в цикле с использованием метода requestAnimationFrame. Внутри функции анимации мы сначала используем метод «clearRect», чтобы очистить весь холст. Затем мы используем метод fillRect для рисования прямоугольника с координатами x, y (x, 100) с шириной и высотой 100 пикселей. После этого мы используем метод «drawImage», чтобы нарисовать «PLAYERIMAGE» на холсте с координатами x и y (50, 50).

Наконец, мы вызываем функцию «animate» один раз, чтобы запустить цикл анимации. И переменная x будет обновляться в каждом цикле, чтобы создать эффект анимации.

Учебный холст

Продолжение следует, постепенно буду наращивать код и проект.