Canvas HTML. Основы создания фигур на javascript

Canvas HTML. Основы создания фигур на javascript
Метки: /

В этой статье рассмотрим основы canvas, а точнее создания фигур, от обычных квадратов, до рисования линий и кругов.

Рисуем обычную фигуру:

Для начала надо создать HTML элемент canvas, пишем код который ниже.

В элементе canvas мы и будем рисовать фигуры, атрибуты width и height, нужны чтобы задать размер, иначе ширина и высота будут равны нулю и мы не чего там не увидим, по атрибуту id, будем получать сам элемент в JavaScript.

Canvas в JavaScript:

Алгоритм рисования фигуры очень простой, берём canvas элемент, и рисуем в нем фигуру, вот как рисовать квадрат.

Вот что получилось.

Основы рисования квадрата на canvas

Теперь рассмотрим одну функцию по подробнее, это функция getContext('2d'), она делает контекст для рисования, то есть в нашем случае будем рисовать 2d графику, также можно работать и с 3d графикой, но об этом в другой раз.

базовые функции для рисования квадрата:

  • fillStyle — Назначает цвет для заливки;
  • strokeStyle — Назначает цвет для контуров или линий;
  • fillRect(x, y, width, height) — Создаёт квадрат или прямоугольник с заливкой;
  • strokeRect(x, y, width, height) — Создаёт квадрат или прямоугольник без заливки, то есть контуры;
  • clearRect(x, y, width, height) — стирает область заданную в параметрах;

Давайте подробнее рассмотрим параметры функций, если с width и height всё понятно, это ширина и высота прямоугольника соответственно, а вот с x и y не всё так однозначно как хотелось бы, в том дело, что расчёт ведётся не так как мы привыкли в математики, там наоборот y идёт с верху вниз, x с лева на права, думаю схема которая нарисована ниже поможет в этом разобратся.

Как работают координаты x и y

Эта схема может не много кривая, но суть на мой взгляд ясна, но надо сказать что «px» не надо писать, когда задаёте параметр, задаёте просто число.

Рисуем линии:

Для линий точно также создаём элемент canvas.

Сanvas линии в JavaScript:

Алгоритм рисования линий таков, берём первую позицию и рисуем линии до второй позиции.

Вот что получилось.

Работа с линиями в canvas

Рассмотрим функции, которые могут пригодится для создания линий и своих фигур, например, треугольник.

  • beginPath() — Создаёт новый путь;
  • moveTo(x, y) — Добавляет начальную позицию пути;
  • lineTo(x, y) — Следующая позиция, можно использовать после moveTo и после lineTo;
  • fill() — Заливает фигуру, цветом заданным fillStyle;
  • stroke() — Добавляет линиям цвет загаданный strokeStyle, иначе их не будет видно или если не задан, то делает их чёрными;
  • closePath() — Делает линию между первоначальной позицию и последней позицией;

Это все базовые функции которые вам пригодятся для работы с линиями в canvas.

Рисуем круги:

С кругами всё точно также, как и с линиями, только одна функция отличается.

Вот что получилось.

Работа с дугами в canvas

Как видите единственное что отличается от линий, это функция arc(), которая рисует дуги, рассмотрим её по подробнее.

arc(x, y, radius, startAngle, endAngle, anticlockwise):

  • x и y — С этими параметрами всё понятно, это позиция центра окружности:
  • radius — Это просто радиус;
  • startAngle — Угол начала дуги, измеряется по часовой стрелке от положительной оси Х, выражается в радианах;
  • endAngle — Угол завершения дуги, всё остальное точно также как у параметра srartAngle;
  • anticlockwise — Задаёт направление рисования дуги. Если true — против часовой, false — по часовой;

Вот как то так работать с дугами.

Вывод:

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

Если вы всё поняли в этой статье и готовы продолжать дальше учить Canvas, то прочитайте это: Canvas анимация на JavaScript, простыми словами и без воды.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 2
Средняя оценка: 3,50
Загрузка...

Поделится:

Также рекомендую: