캔버스에 또 다른 테두리를 그립니다.

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();
. 
. 
.