javascript - 使用 Canvas 在一端 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(红色、绿色、蓝色、alpha)颜色空间，只需更改 alpha 值即可。

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

示例:

 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>