Как сделать треугольник в html canvas

Добавил пользователь Алексей Ф.
Обновлено: 04.10.2024

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Урок №
Учебник
по регулярным выражениям
Урок №
Работа с регулярными
выражениями. Глава 1.
Урок №
Работа с регулярными
выражениями. Глава 2.
Урок №
Работа с регулярными
выражениями. Глава 3.
Урок №
Работа с регулярными
выражениям. Глава 4.
Урок №
Отличия
от PHP версии

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Урок №
новая вкладка с new.code.mu
Доступные события
Урок №
новая вкладка с new.code.mu
Перемещение элемента по окну
Урок №
новая вкладка с new.code.mu
Перемещение на другой элемент
Урок №
новая вкладка с new.code.mu
Объект event.dataTransfer
Урок №
новая вкладка с new.code.mu
Картинка при перетягивании
Урок №
новая вкладка с new.code.mu
Вид курсора

Урок №
Введение
в ООП в стиле ES6
Урок №
Основы
работы с ООП
Урок №
Наследование
классов в JavaScript
Продвинутая работа
с классами на JavaScript -->
Урок №
Применение
ООП при работе с DOM
Урок №
Практика
по ООП в JavaScript
Тут скоро будут еще уроки
по функциональному и прототипному
стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Урок №
новая вкладка с new.code.mu
Функции resolve reject
Урок №
новая вкладка с new.code.mu
Метод catch
Урок №
новая вкладка с new.code.mu
Цепочки промисов
Урок №
новая вкладка с new.code.mu
Перехват ошибок
Урок №
новая вкладка с new.code.mu
Promise.all
Урок №
новая вкладка с new.code.mu
Promise.race
Урок №
новая вкладка с new.code.mu
async await
Урок №
новая вкладка с new.code.mu
Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Урок №
Учебник
jQuery для новичков
Урок №
Основы
работы с jQuery
Урок №
Манипулирование
элементами страницы
Урок №
Работа
с набором элементов
Урок №
Работа
с событиями jQuery
Урок №
Эффекты и анимация
библиотеки jQuery
Урок №
Практика на отработку
библиотеки jQuery
Урок №
Работа с
библиотекой jQueryUI
Урок №
Популярные плагины
библиотеки jQuery

Итак, давайте приступим к изучению рисования на канвасе.

Рисование линий

Начнем с простого - с рисования линий. Чтобы понять, как это делается, представьте себе, что у вас есть лист бумаги и карандаш. Вы можете рисовать на этом листе, а можете не рисуя просто перемещать карандаш в нужную точку.

Так же работает и JavaScript: у него есть карандаш (или перо для рисования), в нужное место вы можете перемещать его с помощью метода moveTo, а рисовать - с помощью метода lineTo.

Оба метода параметрами принимают точку, в которую сдвинуть кончик пера - первым параметром координату по горизонтали, а вторым - по вертикали. Начало координат - точка 0,0 - это верхний левый угол элемента.

Когда перо перемещается в нужную точку - метод moveTo просто перемещает, а lineTo в процессе перемещения рисует линию от текущего положения пера до точки, в которое оно переместится.

Что-то типа такого должно нарисовать горизонтальную линию:

Эта линия будет выглядеть вот так:

Однако, если запустить приведенный выше код - ничего не произойдет: необходимо написать еще две команды: первая команда beginPath должна быть указана перед началом рисования линии, а вторая команда stroke должна быть вызвана после всех комбинаций moveTo и lineTo для того, чтобы линия нарисовалась.

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

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

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

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

Canvas в JavaScript:

Алгоритм рисования фигуры очень простой, берём 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 с лева на права, думаю схема которая нарисована ниже поможет в этом разобратся.

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

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

Сanvas линии в JavaScript:

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

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

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

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Создаем треугольники средствами CSS

Сегодня мы приготовим целую компанию разных треугольников! Равносторонние, направленные в разные стороны, прямоугольные треугольники — все они будут в нашем арсенале. Итак, поехали!

Наша цель: создать треугольники, представленные на изображении ниже, средствами CSS:

Ингредиены: HTML, CSS

Изюминка процесса: основная роль в создании треугольников отводится CSS свойству border. Поэтому предлагаю вспомнить возможные значения этого свойства:

Ликбез по свойству border

Толщину границы, например, 5px , 1em и т. д.
Стиль линии: сплошная solid , прерывистая dashed , точками dotted и т. д. Мы будем использовать сплошную границу solid.
Цвет границы: цвет может задаваться значениями HTML-кода, rgb или hsl, а также может быть прозрачным. Чтобы установить прозрачный цвет, используется значение transparent.

В итоге граница элемента CSS определяется записью вида:

Равнобедренные треугольники

Принцип создания.

Рассмотрим равнобедренный направленный вверх треугольник. Мысленно впишем треугольник в квадрат.

Для верхней границы запишем border-top: 0;

И напоследок, так как квадрат воображаемый, зададим ему нулевые ширину и высоту: width:0; height:0.

Используя описанный выше принцип, потренируемся и создадим на CSS несколько видов треугольников!

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