HTML5 Canvas 暂停和重启动画答案

【问题标题】：HTML5 Canvas pause and restart animationHTML5 Canvas 暂停和重启动画
【发布时间】：2015-06-18 14:14:12
【问题描述】：

我正在构建一个简单的 HTML5 画布动画，其中几行曲折穿过画布。

绘制完线条后，动画将重新开始。我正在尝试在每次重置 5 秒之间添加一个暂停。有没有办法做到这一点？

我的画布代码如下：

<canvas id="myCanvas" width="220" height="400" style="background:black"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var counter = 0;

    setInterval(function(){

        if (counter > 13) {
            counter = 0;
            context.clearRect(0, 0, 220, 400); // clears the animation
        }

        drawLine(counter,context);
        counter++;
    },200);

    function drawLine(whichOne, context) {
        context.beginPath();

        if (whichOne % 2 == 0)
        {
            context.moveTo(0,2 + (whichOne / 2) * 30);
            context.lineTo(220, 2 + ((whichOne + 1) / 2) * 30);
        }
        else
        {
            context.moveTo(220,2 + (whichOne / 2) * 30);
            context.lineTo(0, 2 + ((whichOne + 1) / 2) * 30);
        }

        // Stroke Style
        context.lineWidth = 2;
        context.strokeStyle = '#FFFFFF';
        context.stroke();
    }
</script>

这是我的代码的fiddle。我对 HTML5 画布非常陌生，因此不胜感激。

【问题讨论】：

暂停它本身不是画布问题。（换句话说，画布的参与是无关紧要的）。
谢谢@Alnitak - 那么我应该怎么做才能在动画上创建暂停？

标签： jquery html canvas

【解决方案1】：

您的问题描述不清楚，但如果您的意图只是在初始绘图结束和下一个绘图开始之间有一个固定延迟，那么您最好使用setTimeout而不是setInterval:

var counter = 0;

(function loop() {
    if (counter > 13) {
        counter = 0;
        setTimeout(function() {
            context.clearRect(0, 0, 220, 400); // clears the animation
            setTimeout(loop, 200);   // start it up again
        }, 1000);     // but wait a second
    } else {
        drawLine(counter,context);
        counter++;
        setTimeout(loop, 200);
    }
})();   // start the loop immediately

见http://jsfiddle.net/alnitak/stdbagrc/

【讨论】：