JavaScript для детей — страница 35 из 48

Напишите функцию 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-код:

Анимация с canvas

208

Теперь введите между тегов