需要绘制平滑角落的褪色线

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

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";

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

Example

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

来源

2017-04-20 John

http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas –

可能的重复[如何通过N绘制平滑曲线点使用JavaScript的HTML5画布？]（http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas） – Kaiido

第二个答案会给一个点数组，这将允许您停止并重新启动绘图（并因此像您一样改变颜色）。但请注意，在给定的代码块中，您并未调用beginPath，因此在循环中您一遍又一遍地绘制相同的路径块。 – Kaiido

鉴于你提供的JSFiddle链接，我能够产生我认为你以后的东西。我只是修改了渐变的结束界限。原始梯度（第7行）为：

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

并且这只包含第一条线段。但是，如果我改变了后两个参数，它开始穿越整条生产线：

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

因此，假如您定义的循环以上的的StrokeStyle，把它涵盖了线的整个长度，它应该与工作圆形斜接（线连接）。

希望这会有所帮助。

来源

2017-07-01 01:15:08

需要绘制平滑角落的褪色线

回答

相关问题