从javascript对象内部调用requestAnimationFrame

我在想办法解决这个问题时遇到了麻烦。我是OOJavaScript新手，尝试将我的第一个类/对象组合在一起。我正在尝试创建一个画布加载程序，但它不起作用。我已经将错误缩小到clock类中animate函数内的requestAnimationWindow部分。我得到一个对象[Object global]没有方法“animate”错误。这是我的密码

HTML:

var clockTest=新时钟（document.getElementById（“showLoader”），0，100）；
clockTest.animate（）；

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 + '%';
        });
    }
};

功能时钟（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；
变量y=this.canvas.height/2；
var半径=75；
this.curPerc=0；
这个百分比=110；
var逆时针=假；
var circ=Math.PI*2；
var quart=Math.PI/2；
context.lineWidth=10；
context.strokeStyle='#ed3f36'；
this.animate=函数（当前）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
this.context.beginPath（）；
弧（x，y，半径，-（夸脱），（（圈）*当前）-夸脱，假）；
this.context.stroke（）；
这个.curPerc++；
if（this.curPerc

}

---

任何提示都将不胜感激。谢谢

这与您传递给requestAnimationFrame的匿名函数中的上下文有关，而不是您认为的

this

。使用闭包 i、 e

this.animate=函数（当前）{
var self=this；//在从ES6类方法内部调用requestAnimationFrame时，我使用three.js遇到了相同的问题，我最终解决问题的方法是：

animate() {
    requestAnimationFrame(() => this.animate());
    this.render();
}

上面的代码示例缺少
this.context=context
上面的
this.animate
。这里有一把小提琴，你可以向人们展示：谢谢！这帮了大忙。清理了我的代码，现在工作起来像个冠军！
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 + '%';
            });
        }
    };
}

animate() {
    requestAnimationFrame(() => this.animate());
    this.render();
}