Канва для всех: прямоугольники и пути

В прошлой статье цикла мы узнали как получить ссылку на двумерный контекст для рисования на канве. Продолжаем двигаться дальше и сегодня, наконец-то, научимся рисовать простейшие фигуры, примитивы.

Одним из базовых методов, применяемых для рисования является fillRect, который рисует прямоугольник, залитый указанным цветом (по умолчанию — черным).

ctx.fillRect(50, 50, 100, 100);

Этот код нарисует черный квадрат на канве:

fillRect нарисовал черный квадрат

fillRect нарисовал черный квадрат

С помощью этого метода можно рисовать не только квадраты, но и обычные прямоугольник. Достаточно лишь указать в параметрах х и у координату левой верхней вершины, ширину и высоту (ctx.fillRect(x0, y0, width, height); ).

Чтобы нарисовать прямоугольник не залитый каким-либо цветом, а лишь с прочерченными границами, следует использовать метод ctx.strokeRect:

ctx.strokeRect(50, 50, 100, 100);

Этот метод принимает те же параметры, что и предыдущий. На канве будет изображен следующий рисунок:

Квадрат на canvas

Квадрат на canvas

Быстро, просто и удобно. Переходим дальше.

Уметь рисовать квадраты, конечно же, хорошо, но как быть, если нужно нарисовать треугольник? Или пятиугольник? Или еще более сложную фигуру? Тут на помощь нам приходят методы рисования «путей».

Вот они:
beginPath — начинает новый путь
moveTo — размещает точку для начала рисования пути
lineTo — рисует путь от точки, заданной с помощью moveTo до указанной в параметрах точки
closePath — закрывает путь, соединяя последнюю точку с первой
fill — заливает путь цветом
stroke — прочерчивает путь

Например, такой код:

ctx.beginPath();  
ctx.moveTo(50, 50);  
ctx.lineTo(50, 250);  
ctx.lineTo(250, 250);  
ctx.closePath();  
ctx.fill();

Нарисует вот такой вот треугольник, залитый черным цветом:

Треугольник на canvas

Треугольник на canvas

Таким способом, Вы сможете рисовать самые разнообразные пути на канве. О продвинутых версиях путей мы поговорим в одной из следующих статьях.

Запись опубликована в рубрике HTML & CSS с метками , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">