Как нарисовать треугольник на Canvas?

@francis_schuster 

Чтобы нарисовать треугольник на Canvas, нужно использовать методы контекста рисования (context) canvas. Вот пример кода, который рисует равносторонний треугольник с вершинами в точках (100, 100), (200, 100) и (150, 200):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath(); // начать новый путь
ctx.moveTo(100, 100); // переместить "курсор" в точку 100,100
ctx.lineTo(200, 100); // провести линию до точки 200,100
ctx.lineTo(150, 200); // провести линию до точки 150,200
ctx.closePath(); // замкнуть путь

ctx.stroke(); // нарисовать контур треугольника

Пример можно посмотреть и запустить здесь: https://codepen.io/anon/pen/KxJEJo.

@francis_schuster 

Данный код нарисует равносторонний треугольник на Canvas. Для этого используется метод getContext('2d'), который предоставляет контекст для рисования двухмерной графики на холсте. Затем с помощью методов beginPath(), moveTo(), lineTo(), closePath() и stroke() формируется и отображается треугольник.

Если вам нужно нарисовать другой вид треугольника (например, равнобедренный треугольник, разносторонний треугольник и т. д.), вы можете изменить координаты точек в методах moveTo() и lineTo() или добавить другие методы для обозначения разных видов треугольника.