0

我想做一个非常简单的动画，画一个圆的中心点，然后慢慢画一条线（半径），以一个渐进的圆结束。现在，圆圈部分工作正常，它是行的代码，只是没有按我的意图工作。它只是没有停止。当用户单击画布的特定区域时，一切都会触发。

var lineX = 390;    
canvas.addEventListener('click',ProcessClick,false);
    function ProcessClick(toi){
        var posx = toi.layerX;
        var posy = toi.layerY;
        if(toi.layerX == undefined || toi.layerY == undefined){
            posx = toi.offsetX;
            posy = toi.offsetY;
        }
        if(posx>=315 && posx<=465 && posy>=250 && posy<=300){
            ctx.clearRect(300, 60, 180, 180);
            lineX = 390;
            var interval = setInterval(aniRadio, 50);
        }
    }//ProcessClick

    aniRadio = function(){
        if(lineX == 390){
            ctx.beginPath();
            ctx.arc(390, 150, 4, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.fillStyle = "black";
            ctx.fill();
        }
        ctx.beginPath();
        ctx.moveTo(lineX, 150);
        lineX += 5;
        ctx.lineTo(lineX, 150);
        ctx.closePath();
        ctx.stroke();
        if(lineX == 465){
            clearInterval(interval);//tried calling another function that just contains this line. No luck either.
        }
    }

我基本上希望间隔在线条到达一个点后自行停止，这样我就可以调用绘制圆的函数。

4

2 回答 2

4

您需要在函数var interval之外获取声明。ProcessClick这样，它就被声明为局部变量，并且undefined在aniRadio.

var interval;
function ProcessClick() {
  // ...
  interval = setInterval(aniRadio, 50);
}
aniRadio = ...
于 2012-12-03T08:22:40.253 回答
0

您应该使用自调用函数在主代码和回调之间共享变量。

每个函数在被调用时都会创建一个新的作用域（它是所有局部变量所在的位置）。函数可以访问其范围和父范围（调用它的函数）中的所有变量。

所以，如果你想在两个函数之间共享一个变量，你可以用一个包含共享变量的自调用函数来包装它们。

(function() {
    var interval;
    var lineX = 390;

    canvas.addEventListener('click',ProcessClick,false);
        function ProcessClick(toi){
            var posx = toi.layerX;
            var posy = toi.layerY;
            if(toi.layerX == undefined || toi.layerY == undefined){
                posx = toi.offsetX;
                posy = toi.offsetY;
            }
            if(posx>=315 && posx<=465 && posy>=250 && posy<=300){
                ctx.clearRect(300, 60, 180, 180);
                lineX = 390;
                interval = setInterval(aniRadio, 50);
            }
        }//ProcessClick

        aniRadio = function(){
            if(lineX == 390){
                ctx.beginPath();
                ctx.arc(390, 150, 4, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.fillStyle = "black";
                ctx.fill();
            }
            ctx.beginPath();
            ctx.moveTo(lineX, 150);
            lineX += 5;
            ctx.lineTo(lineX, 150);
            ctx.closePath();
            ctx.stroke();
            if(lineX == 465){
                clearInterval(interval);//tried calling another function that just contains this line. No luck either.
            }
        }
})();
于 2012-12-03T08:31:44.457 回答