需要绘制具有光滑角落的褪色线条

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

目前我正在循环绘制它，以便我可以设置alpha。

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

我知道如果我把它全部画成一行，我可以使用

con.lineJoin="round";

使边缘平滑。 问题是如果我把它全部画成一行。我不能淡出一半。 因为如果我使用渐变，它将仅适用于绘制的第一条单线而不是整条线。

Example

所以我的问题是。如何绘制具有光滑边缘的线条，我可以使其淡出？

Answer 1

鉴于您提供的JSFiddle链接，我能够制作出我认为您追求的内容。我只是修改了渐变的结束边界。原始渐变（第7行）是：

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

并且这仅包含第一个线段。但是，如果我改变后两个参数，它就会开始越过整行：

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

因此，假设您在循环上方定义了StrokeStyle并使其包含整个行的长度，它应该与舍入的斜接（行连接）一起使用。

希望这有帮助。