Изучаем HTML 5-Б. Лоусон, Р. Шарп - 2011

моментах и поговорю о методах. Для того чтобы нарисовать человечка типа «палка-палка-огуречик», нужно указать координаты х и у на холсте для каждой составляющей его фигуры и палочки. Например, следующий код рисует голову:

ctx.beginPath();

ctx.arc(100, 50, 30, 0, Math.PI*2, true); //

голова ctx.fill () ;

Под головой я имею в виду круг со сплошной заливкой. Я задал координаты х и у, равные 100 и 50 соответственно, и радиус 30 пикселов. Следующие два аргумента — это начальная и конечная точки дуги в радианах. В данном прймере мне нужен полный круг, поэтому я начинаю рисовать его с нуля и заканчиваю на значении Math. Pi*2, что соответствует 360 градусам. Наконец, последний аргумент — это направление рисования дуги:по часовой стрелке или против часовой стрелки. В данном случае это неважно, но аргумент обязательный, поэтому какое-то значение все равно должно присутствовать.

Итак, голова нарисована, и настал черед лица. Улыбка и глаза будут красными. Перед тем как переходить к лицу, нужно снова использовать метод beginPath. На рис. 5.11 показано, что получится, если забыть о нем. Предыдущая дуга сольется с новым путем, с помощью которого я рисую лицо. Это неправильно — для рта мне нужна новая отдельная дуга. Убрать отрезок, соединяющий очертания головы со ртом, можно при помощи move То — это как поднять карандаш над холстом и начать рисовать в другом месте, — однако при этом вокруг головы все равно появится цветной контур, который мне не нужен.

ctx.beginPath();

// рисую улыбку

ctx.strokeStyle = ^f#c00'

ctx.lineWidth = 3;

ctx.arc(100, 50, 20, 0, Math.PI, false); ctx.stroke();

Предыдущий код рисует симпатичную полуокружность новым цветом и новой ширины. Для головы я использовал метод fill, но для лица мне нужен метод stroke, иначе вместо линии получится залитая фигура. Теперь перейдем к глазам:

ctx.beginPath(); ctx.fillStyle = ' #c00' // начинаю левый глаз

ctx.arc(90, 45, 3, 0, Math.PI*2, true); ctx.fill () ;

ctx.moveTo(113, 4 5); // рисую правый глаз

Рис. 5.11 .Пример того, как неразорванный путь приводит к ошибке в рисунке