Canvas - Урок 1

Cavas - Урок 1

1. Создаем документ и добавляем canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>
<body>

<canvas id="my_canvas" width="400" height="200"></canvas>

</body>
</html>

Чтобы увидеть canvas на странице зададим ему стиль в файле style.css и добавим фон в виде сетки, для того чтобы понять как ориентироваться по координатам.

В верхнем левом углу canvas имеет координаты (0,0)

1
2
3
4
5
6
#my_canvas {
   border: 3px solid black;
   margin: 40px;
   background-image: url(/img/setka.png);
}

Для работы с canvas будем использовать JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Получаем ссылку на элемент canvas по идентификатору.
var canvas = document.getElementById('my_canvas');

// Получаем 2D контекст.
// Запомните: вы можете инициализировать только один контекст для каждого элемента
 var ctx = canvas.getContext('2d');
// Нарисуем закрашенный прямоугольник
// Но сначала зададим ему фон
 ctx.fillStyle = 'blue';
// Рисуем прямоугольник
 ctx.fillRect(150, 100, 100, 50);
// Для очистки заданную область пикселей используем метод
// ctx.clearRect(0,0, 400, 200);

Ссылки по теме:

1. Урок 1