circle(x, y, 8, false);
circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);
circle(x - 2, y - 1, 2, false);
circle(x + 2, y - 1, 2, false);
};
212 Часть III. Графика
В первом фрагменте кода, начиная со строки , мы устанавливаем
нужные для рисования свойства lineWidth, strokeStyle и fi llStyle.
Для lineWidth задаем значение 2 пикселя, а для strokeStyle цвет
Black (черный). Это значит, что окружности, которые мы используем
для рисования тела пчелы, ее крылышек и глаз, будут с жирной чер-
ной обводкой. А fi llStyle мы зададим значение Gold (золотой), чтобы
закрасить тело пчелы приятным желтым цветом.
В следующем фрагменте кода, начиная со строки , мы рисуем
набор окружностей, из которых состоит наша пчела. Давайте рассмо-
трим каждую окружность по отдельности.
Первая окружность — это заполненное цветом тело пчелы с центром
в точке (x, y), радиусом 8 пикселей:
circle(x, y, 8, true);
Поскольку мы задали fi llStyle значение Gold, окружность будет
заполнена желтым цветом, вот так:
Вторая окружность — это черный контур вокруг тела пчелы, его раз-
мер и позиция такие же, как у первой окружности:
circle(x, y, 8, false);
Вместе с первой окружностью получится вот что:
Теперь рисуем крылышки. Первое крыло — это окружность-контур
с радиусом 5 пикселей, центр которой на 5 пикселей левее и на 11 пик-
селей выше центра тела пчелы. Второе крыло точно такое же, однако его
центр на 5 пикселей правее центра тела.
circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);
Вместе с этими окружностями наша пчела выглядит так:
14 . Анимации с помощью canvas 213
И наконец, рисуем глаза. Первый на 2 пикселя левее и на 1 пиксель
выше центра тела, с радиусом 2 пикселя. Второй глаз такой же, но на
2 пикселя правее центра тела.
circle(x - 2, y - 1, 2, false);
circle(x + 2, y - 1, 2, false);
В итоге получается пчела, центр тела которой задается аргументами
x и y, переданными в функцию drawBee.
Изменение позиции пчелы
Для случайного изменения x- и y-координат пчелы — чтобы создавалось
впечатление, будто она летает туда-сюда по «холсту», — мы создадим
Update —
функцию update. Эта функция принимает единственную координату:
обновить
мы будем обновлять по одной координате за раз, чтобы пчела двигалась
случайным образом вправо-влево и вверх-вниз. Вот код функции update:
var update = function (coordinate) {
var offset = Math.random() * 4 - 2;
Coordinate —
coordinate += offset;
координата
if (coordinate > 200) {
coordinate = 200;
}
if (coordinate < 0) {
coordinate = 0;
}
return coordinate;
};
Изменяем координату на величину смещения
В строке мы создаем переменную offset — это смещение, определя-
ющее, на сколько нужно изменить текущую координату. Мы вычисляем
его как Math.random() * 4 - 2, получая случайное число в диапазоне
от −2 до 2. Логика такая: сам по себе вызов Math.random() вернет слу-
чайное значение от 0 до 1, следовательно, Math.random() * 4 даст число
от 0 до 4. И вычтя 2, мы получим наше случайное число от −2 до 2.
В строке мы используем команду coordinate += offset, чтобы
изменить координату на величину смещения offset. Если смещение
214 Часть III. Графика
положительное, координата увеличится, если отрицательное — умень-
шится. Например, если координата равна 100, а смещение равно 1, после
выполнения кода в строке координата примет значение 101. Однако
если координата равна 100, а смещение равно −1, новым значением
координаты станет 99.
Проверка выхода за границу
В строках и мы проверяем, не вылетела ли пчела за границу «хол-
ста», то есть не стала ли координата больше 200 или меньше 0. Если
она стала больше 200, мы присваиваем ей значение 200, а если стала
меньше 0, сбрасываем ее в 0.
Возвращаем обновленную координату
И наконец, в строке мы возвращаем координату с помощью return.
Это дает возможность использовать новое значение в остальной части
программы. Впоследствии мы будем применять это полученное из функ-
ции update значение таким образом:
x = update(x);
y = update(y);
Анимируем пчелу
Теперь, когда у нас есть функции circle, drawBee и update, можно
написать код для анимации нашей неугомонной пчелы.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
drawBee(x, y);
x = update(x);
y = update(y);
ctx.strokeRect(0, 0, 200, 200);
}, 30);
Как обычно, сначала мы получаем «холст» canvas и контекст рисова-
ния ctx. Затем создаем переменные x и y, задавая им обеим значение 100.
14 . Анимации с помощью canvas 215
Таким образом, начальная позиция нашей
пчелы — точка (100, 100), то есть центр «холста»,
как показано на рис. 14.3.
Затем мы вызываем setInterval, пере-
давая первым аргументом функцию, которую
надо будет вызывать каждые 30 миллисекунд.
Внутри этой функции, в строке , мы первым
делом очищаем «холст» вызовом clearRect.
Затем в строке мы рисуем пчелу в позиции
Рис. 14.3. Пчела в позиции
(x, y). При первом вызове функции пчела будет
(100, 100)
нарисована в позиции (100, 100), как на рис. 14.3,
а при каждом последующем вызове — в новой,
случайным образом измененной позиции (x, y).
Далее, начиная со строки , мы обновляем
значения x и y. Функция update принимает
число, добавляет к нему случайное значение
в диапазоне от −2 до 2 и возвращает обновлен-
ное число. А код x = update(x) фактически
означает «изменить x на небольшую случайную
величину».
И наконец, в строке мы вызываем
strokeRect, чтобы обвести рамкой границы
Рис. 14.4. Случайная
«холста» — чтобы было ясно, когда пчела подле-
анимация пчелы
тает к границе. Без этой рамки границы холста
будут невидимы.
Запустив этот код, вы увидите желтую пчелу, которая случайным
образом перемещается по «холсту». На рис. 14.4 показано несколько
кадров анимации.
216 Часть III. Графика
Отскакивающий мяч
Теперь давайте изобразим летающий по «холсту» мяч. При столкнове-
нии с одной из границ он будет отскакивать назад, меняя направление,
словно резиновый.
Мы создадим для нашего мяча JavaScript-объект, написав для этого
конструктор Ball. Объект будет хранить скорость мяча и направ-
Ball — мяч
ление его движения с помощью двух свойств, xSpeed и ySpeed.
Speed —
Горизонтальная скорость мяча будет определяться значением xSpeed,
скорость
а вертикальная — ySpeed.
Создайте для этой анимации файл под названием ball.html и добавьте
в него следующий HTML-код:
Конструктор Ball
Первым делом напишем конструктор Ball, с помощью которого
мы будем создавать наш мяч. Введите следующий код между тегов