再次调用相同的功能时如何停止画布动画？

Question

[我目前正在编码一个网站，在该网站上，单击导航链接后，HTML画布在相关的内容框上画一条线（（我在这里使用markE的绝妙答案https://stackoverflow.com/a/23941786作为动画教程）。我正在对这些行进行动画处理，并且遇到了以下问题：

单击另一个链接时如何停止制作第一个动画？

[我尝试过多次迭代创建标志和cancelAnimationFrame，这很不愉快。

这是一些简化的代码，当前正在使用标记：

HTML

<div class="container">
    <nav>
        <ul>
            <li>
                <a href="#about" id="about" onclick="draw(this.id);">About</a>
            </li>
            <li>
                <a href="#contact" id="contact" onclick="draw(this.id);">Work</a>
            </li>
        </ul>
    </nav>
</div>
<canvas id="canvas"  width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var isRunning = false;
function draw(contentId) {
    if (isRunning) return;
    isRunning = true;
    var t = 1;
    var vertices = [];
    function calcWaypoints(vertices) {
        var waypoints = [];
        for (var i = 1; i < vertices.length; i++) {
            var pt0 = vertices[i - 1];
            var pt1 = vertices[i];
            var dx = pt1.x - pt0.x;
            var dy = pt1.y - pt0.y;
            for (var j = 0; j < 100; j++) {
                var x = pt0.x + dx * j / 100;
                var y = pt0.y + dy * j / 100;
                waypoints.push({
                    x: x,
                    y: y
                });
            }
        }
        return (waypoints);
    }

    function animate() {
        if (t < points.length - 1) {
            window.requestAnimationFrame(animate);
        }

        ctx.beginPath();
        ctx.moveTo(points[t - 1].x, points[t - 1].y);
        ctx.lineTo(points[t].x, points[t].y);
        ctx.stroke();
        t++;
        isRunning = false;
    }

// Clear the canvas before drawing
    ctx.clearRect(0, 0, canvas.width, canvas.height);
// Assign coordinates
    if (contentId == 'about') {
        vertices.push({x: 50, y: 0}, {x: 50, y: 50});
        vertices.push({x: 40, y: 60}, {x: 0, y: 60});
// Animate lines
        ctx.lineCap = "round";
        ctx.lineWidth = border;
        ctx.strokeStyle = "green";
        var points = calcWaypoints(vertices);
        animate(points);
    }
    if (contentId == 'contact') {
        vertices.push({x: 150, y: 0}, {x: 150, y: 50});
        vertices.push({x: 160, y: 60}, {x: 300, y: 60});
        vertices.push({x: 300, y: 70}, {x: 310, y: 70});
        ctx.lineCap = "round";
        ctx.lineWidth = border;
        ctx.strokeStyle = "green";
        var points = calcWaypoints(vertices);
        animate(points);
    }
}

只是重申一下，以防我不清楚：当我单击“关于”后立即单击“接触”时，我希望将第一次单击“关于”时初始化的绘制动画完全停止（包括清除画布），然后开始播放“联系”动画。此刻，“接触”动画确实开始了，但是“关于”动画也坚持要完成。当我两次单击“关于”时，会发生相同的事情-动画同时运行两次...

Answer 1

如果有帮助的人，我设法解决了它（逻辑上有些错误，cancelAnimationFrame最终完成了我需要的工作，而不是使用标志）：