Статьи  : 

Javascript: рисование с помощью canvas

16 октября 2018, 09:05

В данной статье мы рассмотрим основы рисования в браузере с помощью технологии canvas. Для примера сделаем простейшую игру "пушка", в которой нужно стрелять по приближающемуся танку. Танк стремится захватить флаг, и нужно успеть подбить его до этого момента.

открыть страницу с игрой

Для рисования объектов мы используем html-элемент <canvas> и ссылаемся на него в javascript:

var canvas = document.getElementById("tutorial");


Далее мы создаем переменную для 2D визуализации:

var ctx = canvas.getContext("2d");


Теперь с помощью этой переменной ctx уже можно рисовать нужные нам объекты.

Рассмотрим для начала отрисовку самого простого объекта – флага. Сразу для удобства вынесем рисование флага в отдельную функцию draw_flag. Это связано с тем, что нам потребуется анимация, то есть необходимо будет постоянно перерисовывать объекты. В этом случае, очевидно, намного удобнее работать с вызовом одной функции, а не с набором команд.

Функция draw_flag имеет следующий вид:

function draw_flag() {
	ctx.fillStyle = "black";
	ctx.fillRect(flag_x, 460, 5, 39);
	
	ctx.fillStyle = "red";
	ctx.fillRect(flag_x+5, 460, 20, 15);
}


Как видно, сначала мы устанавливаем цвет рисования, затем рисуем прямоугольники. В результате у нас получается черная палка и красный флаг. Положение флага задается координатой flag_x.

Аналогичным образом мы рисуем зеленый прямоугольник танка:

ctx.fillStyle = "green";
ctx.fillRect(tank_x, 480, 35, 19);


Однако танк, в отличие от флага, должен двигаться. Это достигается с помощью циклического вызова функции draw_tank:

setInterval("draw_tank()", 100);


Внутри этой функции мы:
- очищаем поле для рисования
- рисуем танк на новой позиции
- рисуем флаг
- проверяем, достиг ли танк нашего флага

Именно таким способом мы достигаем анимации объектов.

Наконец, мы должны отрисовать летящий снаряд, которым мы выстрелили из пушки. Порядок здесь аналогичен отрисовке танка, за исключением того, что циклический вызов идет до тех пор, пока y-координата снаряда больше нуля (пока он не врежется в землю).

Условие нашей победы: в момент достижения снарядом земли сверяем x-координаты снаряда и танка. Если они совпали – танк подбит.
Условие победы танка: x-координаты танка и флага равны (флаг захвачен).