在给定的时间间隔内重启html5动画

时间:2014-01-31 12:39:15

标签: javascript html5 animation canvas drawing

我有一个html5画布,其中某些内容在给定时间内被动画化。我想做的是在一定的时间间隔内重复这段代码(“重置并重启”图纸)。

var canvas = $("#paper")[0];
var c = canvas.getContext("2d");

var startX = 50;
var startY = 50;
var endX = 100;
var endY = 100;
var amount = 0;
setInterval(function() {
    amount += 0.05; // 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);​

1 个答案:

答案 0 :(得分:1)

将setInterval函数分配给变量。然后你可以清除它

var interval = setInterval(function () {});

clearInterval(interval);

在你的情况下(函数calle设置)你可以使用:

var interval = setInterval(setup, 30);

当你要清除它时,请致电:

clearInterval(interval)