在画布上绘制另一个边框

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