javascript - Canvas - 创建部分实线和部分虚线

Question

我正在尝试在 HTML Canvas 中创建一条线，该线部分为实线，部分为虚线。这是我的代码

ctx.moveTo(10,10);
ctx.lineTo(70,70);
ctx.setLineDash([5,15]);
ctx.lineTo(100,100);
ctx.stroke();

然而，这会将整条线绘制为实线。我尝试在绘制最终线段之前添加 setLineDash，但这不起作用。我哪里出错了？

Answer 1

setLineDash 将应用于整个路径。

通过调用创建新路径

//yourfirstLine();
ctx.stroke();
ctx.beginPath()
//yourSecondLine();

var ctx =  c.getContext('2d')
ctx.beginPath()
ctx.moveTo(10,10);
ctx.lineTo(70,70);
ctx.stroke();

ctx.beginPath()
ctx.setLineDash([5,15]);
ctx.moveTo(80,80);
ctx.lineTo(100,100);
ctx.stroke();

<canvas id="c"></canvas>

或相应地计算dashArray: (这里对于相同的结果，它将是 ctx.setLineDash([85,15,30]))。

var ctx =  c.getContext('2d')
ctx.beginPath()
ctx.setLineDash([85,15,30]);
ctx.moveTo(10,10);
ctx.lineTo(70,70);
ctx.lineTo(100,100);
ctx.stroke();

<canvas id="c"></canvas>

就我个人而言，我会选择前者。