Question

与我最近的一篇文章有类似但不同的问题 -

我遇到错误＆＃34;无法设置属性＆globalConositeOperation＆＃39;未定义＆＃34;当我试图从原型调用中访问类变量时。这是代码 -

＆＃13;

var DrawSlinky = function() {
    this.c = document.getElementById("c"),
    this.w = c.width,
    this.h = c.height,
    this.ctx = c.getContext('2d'),
    
    this.prob = .7,
    this.minSparks = 3,
    this.maxSparks = 10,
    this.minArea = 5,
    this.maxArea = 40,
    this.minVel = 10,
    this.maxVel = 50,

    this.particles = [],
    this.frame = 0;

};

DrawSlinky.prototype.anim = function(){
  this.c.requestAnimationFrame(this.anim);
  
  this.ctx.globalCompositeOperation = 'source-over';
  
  this.ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  this.ctx.shadowBlur = 0;
  this.ctx.fillRect(0, 0, w, h);
  
  this.ctx.globalCompositeOperation = 'lighter';
  
  ++frame;
  
  if(Math.random() < prob) genParticles();
  
  for(var i = 0; i < particles.length; ++i){
    var part = particles[i];
    part.use();
    
    if(part.x < 0 || part.x > w ||
       part.y < 0 || part.y > h ||
       Math.random() < .01){
      particles.splice(i, 1);
      --i;
    }
  }
};

＆＃13;

发生了什么？

它应该引用drawSlinky中的.ctx，但我得到一个无限循环的错误...

更新 - 实际上，有两个问题。一个是我无法弄清楚如何在没有硬编码的情况下使其工作this.requestAnimationFrame(drawSlinky.anim);（drawSlinky是此DrawSlinky类的实例化），

和两个，this.cx.globalCompositeOperation = 'source-over';没有引用DrawSlinky的ctx并将其置于无限循环中。

所以我认为我需要两者的帮助，即使第二个问题是我最初提出的问题

Answer 1

var me = this;
this.c.requestAnimationFrame(function(){
  me.anim();
});

调用函数时设置此值，而不是在声明函数时设置。更多信息：此变量

下的https://stackoverflow.com/a/16063711/1641941

希望有所帮助

将动画代码重构为类，在访问类变量时收到错误

1 个答案: