需要绘制一个带有平滑拐角的虚线。

Question

我正在使用一组点来绘制一条绿色的线。

for(var i = this.trail.length - 1; i > -1 + 1; i--)
{
    var time = this.trail[i][0];
    var pos = this.trail[i][1];
    var pos2 = this.trail[i - 1][1];


    var difference = currentTime - time;

    var alpha = ((falloffTime - difference) / 255.0) / 255.0;

    if(alpha < 0)
        alpha = 0;


    pos = camera.WorldToScreen(pos.x, pos.y);
    pos2 = camera.WorldToScreen(pos2.x, pos2.y);

    con.moveTo(pos.x, pos.y);
    con.lineTo(pos2.x, pos2.y);

    con.lineWidth = 3;
    con.strokeStyle = "rgba(128, 190, 3, " + alpha + ")";
    con.stroke();
}

目前我正在循环中绘制它，以便可以设置透明度。

但是，绘制的线看起来有些锯齿状。

我知道如果将其全部绘制为单一线条，则可以使用

con.lineJoin="round";

为了使边缘光滑。 问题在于，如果我将其全部绘制为一条线，则无法使其半透明。 因为如果我使用渐变，它只会应用于第一条单独绘制的线，而不是整个轨迹。 示例 所以我的问题是。我如何绘制具有平滑边缘且可以淡出的线条？

- John

---

https://dev59.com/qGw05IYBdhLWcg3wwEUS - ibrahim mahrir

第二个答案将给出一个点数组，这将允许您停止和重新开始绘图（因此可以像更改颜色一样）。但请注意，在给定的代码块中，您没有调用beginPath，因此在循环中，您会一遍又一遍地绘制相同的路径块。 - Kaiido

Answer 1

根据您提供的JSFiddle链接，我能够制作出我认为您想要的效果。我只是修改了渐变的结束边界。原始的渐变（第7行）如下：

var grad= ctx.createLinearGradient(50, 50, 150, 150);

这仅涵盖了第一行段。但是，如果我更改后两个参数，它将开始跨越整条线：

var grad= ctx.createLinearGradient(50, 50, 250, 250);

所以假设您在循环之前定义了StrokeStyle，并且它包含了整个线的长度，那么它应该可以使用圆角斜接（线连接）。

希望这可以帮到您。

- Aaron R.