Рисуем линии, квадрат и круг с помощью Canvas

Сегодня поближе познакомимся с графикой которая применяется в Canvas. Научимся рисовать простые линии, многоугольник, квадрат и круг.

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

Начнём с рисования линий. Линии в Canvas отрисовываются с помощью функции stroke, координаты линии задаются с помощью lineTo.

Для начала нарисуем линию пересекающую по горизонтали нашу рабочую область.

Кому не понятен отдельный код - После статьи вы можете скачать пример с полным кодом для проверки работы на своём компьютере.

ctx.lineWidth=3;
ctx.fillStyle="yellow"; //Цвет заливки
ctx.strokeStyle="blue"; //Цвет самой линии
ctx.moveTo(0,h/2);
ctx.lineTo(w,h/2);

ctx.stroke();
ctx.fill();

Параметры заданные в ctx.moveTo определяют стартовую точку, от которой мы и будем рисовать (0,h/2 - Начало середины правого края с лево).

Для того чтобы нарисовать многоугольник линиями нужно добавить всего пару строк:

ctx.lineWidth=3;
ctx.fillStyle="yellow"; //Цвет заливки
ctx.strokeStyle="blue"; //Цвет самой линии
ctx.moveTo(150,h/2-50);
ctx.lineTo(w-10,h/2-50);
ctx.lineTo(h-10,w/2+50);
ctx.lineTo(10,h/2+50);
ctx.lineTo(150,h/2-50);

ctx.stroke();
ctx.fill();

Замыкающая линии всегда получается с координатами начальной точки.

Должно получиться следующее.

Линии с помощью Canvas

Надеюсь с линиями разобрались, теперь посмотрим как нарисовать квадрат в Canvas.

ctx.fillStyle="yellow"; //Цвет заливки
ctx.fillRect(100,100,100,100);

За отображение квадрата отвечает функция fillRect

Результат.

Квадрат с помощью Canvas

Круг в Canvas рисуется следующим способом.

ctx.strokeStyle="black";
ctx.fillStyle="blue";
ctx.arc(w/2,h/2,40,0,2*Math.PI,true);
ctx.stroke();
ctx.fill();

Функция arc принимает на себя целых 6 параметров. (Первые 2 параметра определяют начало рисования дуги, радиус, начальный угол, поворот двух дуг, отрисовка по часовой либо против часовой стрелки.)

Результат.

Круг с помощью Canvas

Как и обещал - Скачать файл с полным кодом.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Работа с изображением в html5 canvas

Анимированный задний фон для сайта с помощью Canvas и Html5

Конвертируем видео в формат .ogv для воспроизведения через html5 плеер

Узнаём значение post_max_size с помощью функции ini_get

Программа для удаления ненужных файлов с компьютера

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

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =