HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Получившаяся кривая будет иметь вид дуги.

Более сложный пример иллюстрирует листинг 22.3.

Листинг 22.3

ctxCanvas.beginPath();

ctxCanvas.strokeStyle = 'red';

ctxCanvas.fillStyle = 'red';

ctxCanvas.moveTo(100, 100);

ctxCanvas.quadraticCurveTo(200, 100, 200, 200);

ctxCanvas.lineTo(100, 200);

ctxCanvas.lineTo(100, 100);

ctxCanvas.fill();

Web-сценарий из листинга 22.3 рисует красный сектор окружности с красной же заливкой. Мы проводим кривую Безье с одной контрольной точкой, имеющую вид дуги, и соединяем ее начальную и конечную точки с центром воображаемой окружности.

Еще один пример приведен в листинге 22.4.

Листинг 22.4

ctxCanvas.beginPath();

ctxCanvas.moveTo(20, 0);

ctxCanvas.lineTo(180, 0);

ctxCanvas.quadraticCurveTo(200, 0, 200, 20);

ctxCanvas.lineTo(200, 80);

ctxCanvas.quadraticCurveTo(200, 100, 180, 100);

ctxCanvas.lineTo(20, 100);

ctxCanvas.quadraticCurveTo(0, 100, 0, 80);

ctxCanvas.lineTo(0, 20);

ctxCanvas.quadraticCurveTo(0, 0, 20, 0);

ctxCanvas.stroke();

Web-сценарий из листинга 22.4 рисует прямоугольник со скругленными углами.

Попробуйте сами с ним разобраться.

Прямоугольники

Мы уже умеем рисовать прямоугольники, используя описанные ранее методы strokeRect и fillRect. Но прямоугольники, рисуемые этими методами, представляют собой независимые фигуры, не являющиеся частью какого-либо сложного контура. Если мы хотим нарисовать прямоугольник в составе сложного контура, нам придется прибегнуть к методу rect:

<контекст рисования>.rect(<горизонтальная координата>,<вертикальная координата>, <ширина>,<высота>)

Первые два параметра задают горизонтальную и вертикальную координаты верхнего левого угла рисуемого прямоугольника в пикселах в виде чисел. Третий и четвертый параметры задают, соответственно, ширину и высоту прямоугольника, также в пикселах и тоже в виде чисел. Метод rect не возвращает результата.

После рисования прямоугольника методом rect перо устанавливается в точку с координатами [0,0], т. е. в верхний левый угол канвы.

Web-сценарий из листинга 22.5 рисует сложную фигуру, состоящую их трех накладывающихся друг на друга квадратов, и создает для нее заливку.

Листинг 22.5

ctxCanvas.beginPath();

ctxCanvas.rect(50, 50, 50, 50);

ctxCanvas.rect(75, 75, 50, 50);

ctxCanvas.rect(100, 100, 50, 50);

ctxCanvas.fill();

Задание стиля линий

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

Свойство lineCap задает форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:

— 'butt' — начальная и конечная точки как таковые отсутствуют (значение по умолчанию);

— 'round' — начальная и конечная точки имеют вид кружков;

— 'square' — начальная и конечная точки имеют вид квадратиков.

Web-сценарий из листинга 22.6 рисует толстую прямую линию, начальная и конечная точки которой имеют вид кружков.

Листинг 22.6

ctxCanvas.beginPath();

ctxCanvas.lineWidth = 10;

ctxCanvas.lineCap = 'round';

ctxCanvas.moveTo(20, 20);

ctxCanvas.lineTo(180, 20);

ctxCanvas.stroke();

Свойство lineJoin задает форму точек соединения линий друг с другом. Его значение может быть одной из следующих строк:

— 'miter' — точки соединения имеют вид острого или тупого угла (значение по умолчанию);

— 'round' — точки соединения, образующие острые углы, скругляются;

— 'bevel' — острые углы, образуемые соединяющимися линиями, как бы срезаются.

Web-сценарий из листинга 22.7 рисует контур треугольника толстыми линиями, причем точки соединения этих линий, образующие острые углы, будут срезаться.

Листинг 22.7

ctxCanvas.beginPath();

ctxCanvas.lineWidth = 10;

ctxCanvas.lineJoin = 'bevel';

ctxCanvas.moveTo(20, 20);

ctxCanvas.lineTo(380, 20);

ctxCanvas.lineTo(200, 280);