我有一个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);
答案 0 :(得分:1)
将setInterval函数分配给变量。然后你可以清除它
var interval = setInterval(function () {});
clearInterval(interval);
在你的情况下(函数calle设置)你可以使用:
var interval = setInterval(setup, 30);
当你要清除它时,请致电:
clearInterval(interval)
。