Javascript 使用画布在一端1秒后使用淡出在点之间绘制移动线

我想在点之间画一条线，而它看起来像一条动画移动的线，经过一段时间后从端点开始淡出

我能画出一幅动人的图画，但不能使它褪色。我怎么做？我是画布新手

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

---

一个非常简单的方法是改变线条的不透明度，就像改变数量一样。您可以像在css中一样使用rgba（红、绿、蓝、阿尔法）颜色空间，只需更改阿尔法值

例如：

var canvas=document.getElementById（'paper'）；
var c=canvas.getContext（“2d”）；
var startX=50；
var-startY=50；
var endX=1000；
var endY=1000；
风险价值金额=0；
var不透明度=0；
setInterval（函数（）{
金额+=0.005；//更改为更改持续时间
不透明度+=0.005；
如果（金额>1）金额=1；
c、 clearRect（0，0，canvas.width，canvas.height）；
c、 strokeStyle=`rgba（0,0,0，${opacity}`；
c、 移动到（startX、startY）；
//lerp:a+（b-a）*f
c、 行至（startX+（endX-startX）*金额，startY+（endY-startY）*金额）；
c、 笔划（）；
}，30）；

---

不是说此答案也使用模板文本