Question

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

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.
        }
    }

我基本上希望区间在线到达某一点后自行停止，然后我可以调用绘制圆的函数。

Answer 1

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

var interval;
function ProcessClick() {
  // ...
  interval = setInterval(aniRadio, 50);
}
aniRadio = ...

Answer 2

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

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

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

(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.
            }
        }
})();

需要setInterval才能自行停止

2 个答案: