我正在学习用JavaScript编码。我正在用一些定时鼠标动画编程。我正要添加一些绘制鼠标路径的代码。

这将是一个获取mousemove事件的东西，每次鼠标移动都在画布上绘制一个新的线条路径。随着时间的推移，这条道路将变得更加透明，直到它消失。当然，新的路径总是不透明的，所以有一个连续的运动。

我想出了一个方法，只需要requestanimationframe就可以做到。基本上每次新的mousemove事件发生时，我都会将鼠标路径坐标添加到一个名为mousePathArray的对象数组中。该对象将携带路径坐标和一个“animationStage”计数器。这个计数器基本上决定了路径在“动画”阶段的透明度。(后期将意味着更加透明。)

然后，每一个动画帧我都会调用一个函数，该函数将遍历数组中的所有对象，并根据它们的坐标和animationStage计数器绘制线，将计数器增加1，如果animationStage计数器达到结束编号（可能是50或更多），则会删除数组对象。

这一切都可以完成，但听起来不是所有这些，而是通过引入一个setInterval函数来更容易做到，该函数将在每次鼠标移动时以设置的间隔调用。

那么值得长期这样做吗？不一起使用setInterval和rAF会更快还是更好的JS练习？

写下所有这些之后，我实际上写了上面提到的仅rAF代码。粘贴在这里太长了，但规则需要它。这里是jsfiddle：http://jsfiddle.net/06f7zefn/2/

（我知道有很多低效率和可能糟糕的编码实践，但请耐心等待，我在这方面已经5天了！我可以制作一个isDrawing？布尔值，而不是在每一帧上调用动画（），我可以只做一次ctx. moveTo（），其余的是LineTo（），而不必移动到（）每次迭代，因为一个点来自另一个点停止的地方）

如果我能理解我所说的主要思想，那就是我征求你意见的地方。与其让所有与计时相关的东西都源自rAF调用，不如在这里使用setInterval或setTimeout？

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var currentPosX, currentPosY, prevPosX, prevPosY;
var mousePathArray = [];

canvas.addEventListener ('mousemove', mouseOp);


function mouseOp (mouseEvent) {
    prevPosX = currentPosX;
    prevPosY = currentPosY;
    currentPosX = mouseEvent.clientX;
    currentPosY = mouseEvent.clientY;
    mousePathArray.push( {
        x1: currentPosX,
        x2: prevPosX,
        y1: currentPosY,
        y2: prevPosY,
        animStage: 0
    });
}

function animate () {
    var anims = mousePathArray.length;
    if (anims!=0) {
        for (i=0; i<anims; i++) {
            if (mousePathArray[i].animStage == 20) {
                mousePathArray.splice(i, 1);
                i--;
                anims--;
                continue;
            }

            drawLine(mousePathArray[i].x1, mousePathArray[i].x2, mousePathArray[i].y1, mousePathArray[i].y2, 1 - (mousePathArray[i].animStage * 0.05));
            mousePathArray[i].animStage ++;
        }
    }
}

function drawLine (x1, x2, y1, y2, alpha) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = "rgba(150, 20, 150," + alpha +")";
    ctx.stroke();
}

animloop();

function animloop(){
  window.requestAnimationFrame(animloop);
  gameLoop();
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    animate();
}