Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

// Это означает, что после рисования ветви можно вызвать rotate.

function leg(n) {

c.save; // Сохранить текущее преобразование

if (n == 0) { // Нерекурсивный случай:

с.lineTo(len, 0); // Просто нарисовать горизонтальную линию

} //

else { // Рекурсивный случай: 4 подветви вида: \/

с.scale(1/3,1/3); // Подветви в 3 раза меньше этой ветви

leg(n-1); // Рекурсия для первой подветви

с.rotate(60*deg); // Поворот на 60 градусов по часовой стрелке

leg(n-1); // Вторая подветвь

с.rotate(-120*deg); // Поворот на 120 градусов назад

leg(n-1); // Третья подветвь

с.rotate(60*deg); // Поворот обратно к началу

leg(п-1); // Последняя подветвь

}

c.restore; // Восстановить преобразование

с.translate(len, 0); // Но сместить в конец ветви (0,0)

}

}

snowf1аке(с,0,5,115,125); // Снежинка нулевого уровня является

// равносторонним треугольником

snowflake(c,1,145,115,125); // Снежинка первого уровня - шестиконечная звезда

snowflake(c,2,285,115,125); // и так далее.

snowflake(c,3,425.115.125);

snowflake(c,4,565,115,125); // Снежинка четвертого уровня выглядит как снежинка!

c.stroke; // Нарисовать этот очень сложный контур

21.4.5. Рисование и заливка кривых

Контур - это последовательность фрагментов контура, а фрагмент контура - это последовательность точек, соединенных линиями. В контурах, которые определялись в разделе 21.4.1, эти точки соединялись прямыми линиями, но это не обязательно должно быть так. Объект

CanvasRenderingContext2D
определяет несколько методов, которые добавляют во фрагмент контура новую точку и соединяют ее кривой с текущей точкой:

агс

Этот метод добавляет во фрагмент контура дугу. Он соединяет текущую точку с началом дуги прямой линией и затем соединяет начало дуги с концом дуги сегментом окружности, при этом конечная точка дуги становится новой текущей точкой. Дуга определяется шестью параметрами: координаты X и Y центра окружности, радиус окружности, угол начала и конца дуги и направление (по часовой стрелке или против часовой стрелки) рисования дуги между этими двумя углами.

агсТо

Этот метод так же рисует прямую линию и круговую дугу, как и метод

агс,
но при его использовании дуга определяется другим набором параметров. Аргументы метода
агсТо
определяют точки Р1 и Р2 и радиус. Дуга, добавляемая в контур, имеет указанный радиус и строится так, что линии, соединяющие текущую точку с точкой Р1 и точку Р1 с точкой Р2, являются касательными к ней. Такой необычный, на первый взгляд, способ определения дуг в действительности является весьма удобным при рисовании закругленных углов. Если указать радиус равный 0, этот метод просто нарисует прямую линию, соединяющую текущую точку и точку Р1. Однако если указан ненулевой радиус, он нарисует прямую линию от текущей точки в направлении точки Р1 до начала дуги, затем начнет рисовать круговую дугу, пока направление рисования не совпадет с направлением на точку Р2.

bezierCurveTo

Этот метод добавит во фрагмент контура новую точку Р и соединит ее с текущей точкой кубической кривой Безье. Форма кривой определяется двумя «контрольными точками» С1 и С2. В начале кривой (в текущей точке) рисование начинается в направлении точки С1. В свой конец (в точке Р) кривая приходит в направлении из точки С2. Между этими точками кривая плавно изгибается. Точка Р становится новой текущей точкой для фрагмента контура.

  • Читать дальше
  • 1
  • ...
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: