Question

我有一个要处理canvas绘图的类。我有一个构造函数，它声明诸如canvas元素和上下文之类的属性，还有一个绘制函数，它大约每设置几毫秒就进行繁重的工作。

但是，似乎没有实例属性被保存。

// Canvas stuff
class CanvasSingleton {
  constructor() {
    this.cvs = document.getElementById("rush_canvas");
    this.c = this.cvs.getContext("2d");
    this.acc = new Int8Array(64 * 36);
    /* some preparation stuff that's irrelevant to the question */
    this.ani = setInterval(this.aniStep, 100);
    console.log(this.acc);
  }

  aniStep() {
    if (!this.cvs) { throw new Error("Undefined cvs"); }
    if (!this.c) { throw new Error("Undefined c"); }
    if (!this.acc) { throw new Error("Undefined acc"); }
    /* pixel manipulation stuff using the Int8Array */
  }

  end() {
    clearTimeout(this.ani);
  }
}

var r = new CanvasSingleton();

问题在于CanvasSingleton.cvs中未定义CanvasSingleton.c，CanvasSingleton.acc和CanvasSingleton.aniStep()中的任何一个。

我不知道自己在说什么错，因为我密切关注MDN上的示例。我在做什么错了？

Answer 1

您没有提到自己有

<canvas id="rush_canvas">

在您的HTML中，因此这是第一件事。

此外，有时文档对象模型（DOM）尚未准备好，并且在DOM准备就绪之前执行Javascript常常找不到元素。

要解决此问题：

 var r;

 window.addEventListener('load', (event) => {
     r = new CanvasSingleton();
 });

最后...

this.ani = setInterval(this.aniStep, 100);

应该是

this.ani = setInterval(this.aniStep.bind(this), 100);

bind（this）确保触发间隔时，此范围是类的范围，而不是setInterval（）的范围

JS：类属性未保存

1 个答案: