2

このコードは機能していますが、改善したいと思います。

var c = canvas.getContext("2d"); 
//this is called as an object method I created
var animar = function () {
   var obj = this;//saves the object that called it to later access to its properties
   var counter= 0;
   var animacion = setInterval(function(){
            c.save()
            c.clearRect(0, 0, canvas.width, canvas.height);
            c.rotate(0.1*counter);
            obj.pintar();
            c.restore();
            counter++;

   }, 50);
}

将来的に使用できるように外部関数を使用したいのですが、コードを変更すると巻き上げの問題が発生し、常に上書きせずに rotar() 関数内のカウンターを取得する方法がわかりません。 :

var animar = function () {
    var obj = this;
    var counter= 0;
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}

function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*counter);
    obj.pintar();
    c.restore();
    counter++;
}

最初の例はネストされているため機能しますが、2 番目の例はそうではありません。GLOBAL VARIABLEを使用せずに setInterval のカウンターを取得するにはどうすればよいですか? (つまり... もう一度呼び出すと、0 で開始されません。animar() 関数で 0 に設定すると機能しますが、0 に設定する必要があります。カウンターを使用する、または異なる名前のカウンターを使用するすべての関数で.この2つの可能性はうまく聞こえません.)ありがとう

4

2 に答える 2

3

var counter = 0関数の外に置くだけです：

var counter;
var animar = function () {
    var obj = this;
    counter = 0; // reset every time before 'animacion'...
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}
function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
    counter++;
}

または、グローバル変数が必要ない場合は、Walter の回答に従うか、次のようにします。

var animar = function () {
    var obj = this;
    var counter = 0; // new variable every time animar() is called
    var animacion = setInterval(function(){
        rotar(obj, counter);
        counter++;
    }, 50);
}
function rotar (obj, counter) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*contador);
    obj.pintar();
    c.restore();
}
于 2014-05-13T19:57:30.820 に答える
1

オブジェクトcounter内でスコープを作成します。animar

var animar = function () {
    var obj = this;
    obj.counter= 0;
    var animacion = setInterval(function(){
        rotar(obj)
    }, 50);
}

function rotar (obj) {
    c.save()
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.rotate(0.1*obj.counter);
    obj.pintar();
    c.restore();
    obj.counter++;
}
于 2014-05-13T20:09:11.763 に答える