在画布上分层

Question

我目前正在制作原型，将一些数据显示为模糊米： 背景灰弧显示开始到结束限制，蓝色弧显示当前值。 我在背景灰弧的开始和结束处添加了线条笔划。

为了绘制这个，我使用的是html画布。

var ctx ;

var currVague=document.getElementById("currVague");

ctx = currVague.getContext("2d");
ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.19*Math.PI);
ctx.strokeStyle="#555";
ctx.lineWidth=16;
ctx.stroke();

ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.12*Math.PI);
ctx.strokeStyle="#3872C1";
ctx.lineWidth=16;
ctx.stroke();

ctx.strokeStyle="#949494";
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();

这是我第一次尝试画布，并且不确定为什么灰色曲线显示在前景中。

Answer 1

只需在绘制线条的最后一个部分添加beginPath()：

ctx.strokeStyle="#949494";
ctx.beginPath();     /// here needs to be a beginPath()
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();

如果你没有发生的事情是前一个弧仍然是路径的一部分，当你抚摸它时，那个弧和你新添加的线都将被抚摸。要“打破”路径，只需拨打beginPath()，只有之后添加的内容将在下次被抚摸（或填充）。