Как нарисовать треугольник на Canvas?
Как нарисовать треугольник на Canvas?
1 ответ
от
kennedi_pfeffer ,
10 месяцев назад
@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.
15