画布 - 创建部分实线和部分虚线

Question

我试图在HTML画布中创建一个部分为实体且部分为虚线的行。这是我的代码

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>

Personnaly，我会选择前者。

Answer 2

尝试在代码之前添加：

ctx.setLineDash([1, 5]);