javascript - 需要画一 strip 有平滑角的褪色线

This question already has answers here:

how to draw smooth curve through N points using javascript HTML5 canvas?

(11个答案)


2年前关闭。






我使用点数组画一条绿线。

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

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

最佳答案

有了您提供的JSFiddle链接，我就能产生出我认为您想要的东西。我只是修改了渐变的边界。原始渐变(第7行)为:

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

并且仅包含第一线段。但是，如果我更改后两个参数，它将开始跨越整条线:

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

因此，假设您在循环上方定义了StrokeStyle并使其包含了行的整个长度，则它应与圆角斜接(行连接)一起使用。

希望这可以帮助。