Напишите функцию drawPoints, которая принимает массив
нарисовать
с координатами точек:
точки
var points = [[50, 50], [50, 100], [100, 100], [100, 50], [50, 50]];
drawPoints(points);
и рисует линию, соединяющую эти точки. В данном случае она
должна прочертить линию от (50, 50) до (50, 100) и далее до (100,
100), до (100, 50) и обратно до (50, 50).
Теперь передайте в эту функцию следующий массив:
Mystery —
var mysteryPoints = [[50, 50], [50, 100], [25, 120], [100, 50],
загадочные
[70, 90], [100, 90], [70, 120]];
drawPoints(mysteryPoints);
Подсказка: в points[0][0] находится первая x-координата,
а в points[0][1] первая y-координата.
#3. Рисование мышкой
С помощью jQuery и события mousemove напишите код, рисую-
щий окружность радиусом в 3 пикселя под курсором мышки каж-
дый раз, когда вы передвигаете мышку над «холстом». Поскольку
это событие возникает при малейшем перемещении курсора,
окружности по мере движения мышки будут сливаться в линию.
Подсказка: чтобы вспомнить, как обрабатывать событие
mousemove, загляните в десятую главу.
206 Часть III. Графика
#4. Человечек в «Виселице»
В седьмой главе мы написали вариант игры «Виселица». Теперь
вы можете сделать ее более похожей на настоящую игру, рисуя
части тела человечка всякий раз, когда игрок вводит неверную
букву.
Подсказка: отслеживайте, сколько раз игрок ука-
зал букву, которой нет в слове. Напишите функцию,
которая принимает это число в качестве аргумента и в
зависимости от его значения рисует более или менее
завершенного человечка.
14
А Н И М А Ц И И С П О М О Щ Ь Ю C A N VA S
Создание анимаций с помощью canvas в JavaScript похоже на покадро-
вую мультипликацию — вы рисуете картинку, делаете паузу, стираете
картинку и затем перерисовываете ее в новом месте. Казалось бы, слиш-
ком много действий, однако JavaScript может обновлять положение кар-
тинки очень быстро, так, что получается плавная анимация. В десятой
главе мы узнали, как анимировать элементы DOM, а в этой главе будем
анимировать рисунки с canvas.
Движение по странице
Давайте воспользуемся элементом canvas и функцией setInterval,
чтобы изобразить плавно двигающийся по странице квадрат. Создайте
Animation —
новый файл под названием canvasanimation.html и добавьте в него следу-
анимация
ющий HTML-код:
208
Теперь введите между тегов