需要繪製平滑角落的褪色線

我正在使用點數組繪製綠線。

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

需要繪製平滑角落的褪色線

回答

相關問題