Как программно нарисовать треугольник на canvas в javascript?

Пользователь

от linnea , в категории: JavaScript , 9 месяцев назад

Как программно нарисовать треугольник на canvas в javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от marisa , 8 месяцев назад

@linnea 

Для того чтобы программно нарисовать треугольник на canvas в JavaScript, вам потребуется использовать методы beginPath(), moveTo(), lineTo() и closePath() для определения трех вершин треугольника и его формы. Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Получаем элемент canvas по его id
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Задаем координаты трех вершин треугольника
var x1 = 100;
var y1 = 100;
var x2 = 200;
var y2 = 200;
var x3 = 300;
var y3 = 100;

// Начинаем новый путь
ctx.beginPath();

// Перемещаем перо в первую вершину треугольника
ctx.moveTo(x1, y1);

// Добавляем линии к двум оставшимся вершинам треугольника
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);

// Закрываем путь, соединяя последнюю вершину с первой
ctx.closePath();

// Заливаем треугольник выбранным цветом
ctx.fillStyle = "blue";
ctx.fill();

// Рисуем контур треугольника
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();


Вышеуказанный код рисует треугольник с вершинами (100, 100), (200, 200) и (300, 100) на canvas элементе с идентификатором "myCanvas". Однако, чтобы этот код работал, вам потребуется HTML элемент <canvas> с идентификатором "myCanvas" на вашей странице.