需要用光滑的角画一条褪色线[重复]答案

【问题标题】：Need to draw a faded line with smooth corners [duplicate]需要用光滑的角画一条褪色线[重复]
【发布时间】：2017-09-17 16:18:53
【问题描述】：

我正在使用点数组绘制一条绿线。

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

所以我的问题是。如何绘制边缘平滑的线条并使其淡出？

【问题讨论】：

stackoverflow.com/questions/7054272/…
第二个答案将给出一系列点，这将允许您停止并重新开始绘图（因此就像您一样更改颜色）。但请注意，在给定的代码块中，您没有调用 beginPath，因此在循环中，您一遍又一遍地绘制相同的路径块。

标签： javascript html canvas drawing line

【解决方案1】：

鉴于您提供的 JSFiddle 链接，我能够生成我认为您所追求的东西。我只是修改了渐变的结束边界。原始渐变（第 7 行）为：

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

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

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

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

希望这会有所帮助。

【讨论】：