Ник Морган - JavaScript для детей. Самоучитель по программированию

Теперь используйте setInterval, чтобы двигать две машины

(nissan и tesla) вправо, каждые 30 миллисекунд смещая их

на случайное расстояние от 0 до 5 пикселей. Вы увидите, как

машины едут по экрану, то и дело меняя скорость. Попробуйте

угадать, какая из машин достигнет границы окна первой.

Ч АС Т Ь I I I

Графика

Ч АС Т Ь I I I

Гра

Гр ф

а и

ф к

и а

к

13

Э Л Е М Е Н Т C A N VA S

Возможности JavaScript не ограничиваются работой с текстом и чис-

лами. Также можно писать код для рисования картинок с помощью

HTML-элемента canvas, который представляет собой что-то вроде

чистого холста или листа бумаги. Вы можете рисовать на этом «холсте»

практически все что угодно: чертить линии, контуры, выводить текст —

пределов нет, кроме вашего воображения!

Эта глава посвящена основам рисования на «холсте». В дальнейших

главах мы, отталкиваясь от этих основ, приступим к созданию видео-

игры на JavaScript, использующей элемент canvas.

Создаем «холст»

Прежде чем начать работу с элементом canvas, создайте новый HTML-

документ со следующим кодом и сохраните его в файле canvas.html :



193

// Здесь будет JavaScript-код

Как видите, в строке  мы создали элемент canvas, дав атрибуту id

значение "canvas", чтобы затем обращаться к нему с помощью этого id.

Атрибуты width и height задают ширину и высоту «холста» — в данном

случае его размер 200 × 200 пикселей.

Рисование на «холсте»

Теперь, когда у нас есть страница с элементом canvas, давайте попро-

буем при помощи JavaScript-кода нарисовать на «холсте» прямоугольник.

Введите следующий код в файл canvas.html между тегов .

Ctx —

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

context —

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

контекст

ctx.fillRect(0, 0, 10, 10);

Get

context —

получить

контекст

Давайте разберем этот код строчка за строчкой.

Ищем и сохраняем элемент canvas

Первым делом находим элемент canvas с помощью

команды document.getElementById("canvas"). Как мы

знаем из девятой главы, метод getElementById возвра-

щает объект DOM для элемента с указанным id. Теперь

сохраним этот объект в переменной с именем canvas: var

canvas = document.getElementById("canvas").

Получаем контекст рисования

Теперь нужно получить контекст рисования для элемента

canvas. Контекст рисования — это JavaScript-объект, обла-

дающий методами и свойствами, при помощи которых

можно рисовать на «холсте». Чтобы получить этот объект,

мы вызываем для canvas метод getContext, передавая

ему строку "2d", — это означает, что мы собираемся фор-

мировать на «холсте» двухмерное изображение. Сохраним

контекст в переменной ctx с помощью команды var ctx

= canvas.getContext("2d").

194 Часть III. Графика

Рисуем квадрат

И наконец, в последней строке мы рисуем на «холсте» равносторонний

прямоугольник (то есть квадрат), вызывая метод контекста рисования

fi llRect, который принимает четыре аргумента: это, в порядке очеред-

Rect —

ности, x - и y -координаты верхнего левого угла квадрата (0, 0), а также его

rectangle —

ширина и высота (10, 10). В данном случае мы просим JavaScript нари-

прямо-

угольник

совать прямоугольник 10 × 10 пикселей в координатах (0, 0) — то есть

в верхнем левом углу «холста».

Запустив этот код, вы должны увидеть на экране черный квадратик,

как на рис. 13.1.

Рис. 13.1. Наш первый рисунок на «холсте»

Рисуем несколько квадратов

Теперь попробуем кое-что поинтереснее. Вместо рисования единственного

квадратика изобразим в цикле множество квадратов, расположенных по диа-

гонали. Замените код между тегами следующим кодом. Запустив

его, вы должны увидеть восемь черных квадратиков, как на рис. 13.2:

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

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

for (var i = 0; i ctx.fillRect(i * 10, i * 10, 10, 10);

}

Первые две строки кода остались прежними. В третьей строке мы

задаем цикл, который повторяется восемь раз. В теле этого цикла мы

вызываем метод контекста рисования fi llRect.

Рис. 13.2. Рисование нескольких квадратов в цикле for

13. Элемент canvas 195