Question

我正在构建一个简单的HTML5画布动画，其中几行以zig-zag为画布。

绘制线条后，动画将重新开始。我试图在每次重置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画布的新手，所以对任何帮助表示赞赏。

Answer 1

您的问题描述不清楚，但如果您的目的是在初始绘图结束和下一个绘图开始之间只有固定延迟，那么您最好使用{ {1}}代替setTimeout：

setInterval

请参阅http://jsfiddle.net/alnitak/stdbagrc/

HTML5 Canvas暂停和重新启动动画

1 个答案: