Нарисуйте еще одну границу на холсте

Question

У меня есть проблема.Мне нужно нарисовать еще одну границу на моем холсте.Если я попробую это:

c2.beginPath();

c2.moveTo(0, 0);

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.lineTo(0, 100);
c2.lineWidth = Number(ss) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();

c2.fill();

это не работает, потому что все линии имеют зеленую рамку.Вы можете помочь мне?

--- Редактировать:Я не могу закрыть патч, когда закрываю линию, потому что эта линия рисует форму.Когда я закрываю патч, моя форма становится неправильной.Может быть, есть еще идеи?

Answer 1

c2.stroke(); перерисовывает весь путь до этой точки с использованием текущего стиля штриха.Таким образом, в конечном итоге будет применен только последний стиль.

Попробуйте добавить c2.closePath(); с последующим c2.beginPath() после каждого c2.stroke() чтобы начать новый путь, который может иметь отдельный стиль штриха.

например:

c2.lineTo(0, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "red";
c2.stroke();
c2.closePath();

c2.beginPath();
c2.moveTo(0, 100);
c2.lineTo(100, 100);
c2.lineWidth = Number(sw) + 6;
c2.strokeStyle = "#00ec11";
c2.stroke();
c2.closePath();
. 
. 
.