Как сделать двойные линии на Canvas?

@willis.streich 

Для создания двойных линий на Canvas можно использовать следующий код:

1
2
3
4
5
6
7

ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.moveTo(10, 20);
ctx.lineTo(200, 20);
ctx.stroke();

В этом коде мы сначала задаем ширину линии равную 3px, затем рисуем первую линию с помощью команд moveTo и lineTo. После этого мы перемещаем точку начала рисования второй линии на 10px ниже и снова вызываем команды moveTo и lineTo для нарисования второй линии. Наконец, мы вызываем команду stroke для отображения линий.

Таким образом, мы получим две параллельные линии с шириной 3px. Кроме того, мы можем использовать другие команды и настройки для создания более сложных графических элементов на Canvas.

@willis.streich 

Дополнительно можно воспользоваться следующим кодом, если вам нужны реальные двойные линии (линии, состоящие из двух частей):

1 2 3 4 5 6 7 8

ctx.lineWidth = 3;

// Первая линия ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(200, 10); ctx.stroke();

// Вторая линия ctx.beginPath(); ctx.moveTo(10, 20); ctx.lineTo(200, 20); ctx.stroke();

В этом коде мы устанавливаем ширину линии равной 3px (один раз для обеих линий), затем рисуем первую линию и вторую линию отдельно, используя отдельные вызовы beginPath и stroke для каждой из них. Таким образом, у нас будет две отдельные линии шириной 3px, создающие визуальный эффект двойной линии.