キャンバスを使用して1秒後にフェードアウトしてポイント間の移動線を描く

Question

ポイントの間に線を描きたいのですが、アニメーション移動線のように見えます。

私は動くことができますが、フェードアウトすることはできません。どうしたらいいですか？私はCanvasが初めてです。

var canvas = document.getElementById('paper'); 
var c = canvas.getContext("2d"); 

var startX = 50; 
var startY = 50; 
var endX = 1000; 
var endY = 1000; 
var amount = 0; 
setInterval(function() { 
    amount += 0.005; // change to alter duration 
    if (amount > 1) amount = 1; 
    c.clearRect(0, 0, canvas.width, canvas.height); 
    c.strokeStyle = "black"; 
    c.moveTo(startX, startY); 
    // lerp : a + (b - a) * f 
    c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); 
    c.stroke(); 
}, 30); 

https://jsfiddle.net/ashokd23/aucd8hgy/2/

Answer 1

これを行うにはかなり簡単な方法は、あなたが金額を変更する方法と同様にラインの不透明度を変更することです。あなたはcssと同じようにrgba（赤、緑、青、アルファ）色空間を使用し、アルファ値を変更することができます。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

例：この答えは、同様https://developer.mozilla.org/en-US/docs/Web/テンプレートリテラルを使用していること

var canvas = document.getElementById('paper'); 
 
var c = canvas.getContext("2d"); 
 

 
var startX = 50; 
 
var startY = 50; 
 
var endX = 1000; 
 
var endY = 1000; 
 
var amount = 0; 
 
var opacity = 0; 
 
setInterval(function() { 
 
    amount += 0.005; // change to alter duration 
 
    opacity += 0.005; 
 
    if (amount > 1) amount = 1; 
 
    c.clearRect(0, 0, canvas.width, canvas.height); 
 
    c.strokeStyle = `rgba(0,0,0, ${opacity}`; 
 
    c.moveTo(startX, startY); 
 
    // lerp : a + (b - a) * f 
 
    c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); 
 
    c.stroke(); 
 
}, 30);

<canvas id="paper" width="500" height="500"></canvas>