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

メインコードとコールバックの間で変数を共有するには、自己呼び出し関数を使用する必要があります。

各関数は、呼び出されたときに新しいスコープを作成します（すべてのローカル変数が存在する場所です）。関数は、そのスコープと親のスコープ（それを呼び出した関数）内のすべての変数にアクセスできます。

したがって、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.
            }
        }
})();
于 2012-12-03T08:31:44.457 に答える