從javascript對象中調用requestAnimationFrame

Question

我碰到了一堵牆，試圖弄清楚這一點。我是OO Javascript的新手，並試圖將我的第一個類/對象放在一起。我試圖創建一個畫布加載器，它不工作。我已經縮小了錯誤到我的時鐘類中的animate函數中的requestAnimationWindow部分。我得到一個對象[對象全局]沒有方法'動畫'錯誤。這是我的代碼。

HTML：

<div id="loader"><canvas id="showLoader" width="250" height="250"></canvas><div id="showTimer"><p id="elapsedTime"> 
    <script> 
    var clockTest = new clock(document.getElementById("showLoader"), 0, 100); 
    clockTest.animate(); 
    </script> 

</p></div></div> 

的Javascript：

function clock(canvas, curPerc, endPrecent){ 

var showPerc = document.getElementById("elapsedTime"); 
this.canvas = document.getElementById("showLoader"); 

var context = this.canvas.getContext('2d'); 
var x = this.canvas.width/2; 
var y = this.canvas.height/2; 
var radius = 75; 
this.curPerc = 0; 
this.endPercent = 110; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 


context.lineWidth = 10; 
context.strokeStyle = '#ed3f36'; 


this.animate = function(current) { 

    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    this.context.beginPath(); 
    this.context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    this.context.stroke(); 
    this.curPerc++; 

    if(this.curPerc < this.endPercent) { 
     requestAnimationFrame(function() { 
      this.animate(curPerc/100); 
      showPerc.innerHTML = this.curPerc + '%'; 
     }); 
    } 
}; 

}

任何提示讚賞。謝謝！

Answer 1

這是在你傳遞給requestAnimationFrame的匿名函數中，而不是你認爲的this。使用封閉 即

this.animate = function(current) { 
    var self = this; //<-- Create a reference to the this you want 
    self.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    /.. etc, etc.. 

    if(self.curPerc < self.endPercent) { 
     requestAnimationFrame(function() { 
      self.animate(self.curPerc/100); //<-- and use it here 
      showPerc.innerHTML = self.curPerc + '%'; //<-- and here 
     }); 
    } 
}; 

在其他幾個點的，我會嘗試構造對象好一點，你似乎沒有被正確保存參考性質。您傳入的參數不存儲在對象上，而且您沒有正確存儲上下文。例如：

function clock(canvas, curPerc, endPrecent) { 
    var self = this; 
    // Set object properties here, i.e. from the parameters passed in 
    // Note also, anything that is a property (i.e. this.) is public, can be accessed from otuside this object, 
    // whereas variable declared with var , are privte, can only be access within this object 
    self.canvas = canvas; 
    self.curPerc = curPerc; 
    self.endPercent = endPrecent; 
    self.context = self.canvas.getContext('2d'); //needs to be store like this, if you want to access below as this.context 
    self.context.lineWidth = 10; 
    self.context.strokeStyle = '#ed3f36'; 

    //Private variables 
    var showPerc = document.getElementById("elapsedTime"); 
    var x = self.canvas.width/2; 
    var y = self.canvas.height/2; 
    var radius = 75; 
    var counterClockwise = false; 
    var circ = Math.PI * 2; 
    var quart = Math.PI/2; 

    //Methods 
    self.animate = function (current) { 
     self.context.clearRect(0, 0, self.canvas.width, self.canvas.height); 
     self.context.beginPath(); 
     self.context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
     self.context.stroke(); 
     self.curPerc++; 

     if (self.curPerc < self.endPercent) { 
      requestAnimationFrame(function() { 
       self.animate(curPerc/100); 
       showPerc.innerHTML = self.curPerc + '%'; 
      }); 
     } 
    }; 
} 

正開始朝着更好的方向前進。