Как нарисовать пунктирную линию на Canvas?

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

от jorge , в категории: Другие , 3 месяца назад

Как нарисовать пунктирную линию на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от jose , 3 месяца назад

@jorge 

Для рисования пунктирных линий на объекте Canvas в JavaScript можно использовать метод setLineDash() контекста рисования.


Ниже приведен пример кода, который рисует пунктирную горизонтальную линию на Canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Установить массив длин и промежутков для пунктирной линии
ctx.setLineDash([10, 5]);

// Нарисовать линию
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(200, 50);
ctx.stroke();


В данном примере мы установили массив [10, 5] для метода setLineDash(). Этот массив означает, что линия будет состоять из базовой длины 10 и промежутка длиной 5.


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