我有一个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);
将setInterval函数分配给变量。那你可以清除
var interval = setInterval(function () {});
clearInterval(interval);
在您的情况下(功能CALLE设置)您可以使用:
var interval = setInterval(setup, 30);
当您想清除它时,请致电:
clearInterval(interval)
。