Question

我正在尝试通过resizeCanvas()方法调整画布元素的大小，以响应调整大小事件。如果直接调用class方法，画布将调整大小，但是在随后通过事件处理程序进行的调用中出现以下错误：Uncaught TypeError: Cannot set property 'width' of undefined

这是我的测试代码：

class CanvasManager {
  constructor(canvasID) {
    this.canvas = document.getElementById(canvasID);
    this.context = this.canvas.getContext('2d');
  }

  resizeCanvas() {
    this.canvas.width = window.innerWidth-30;
    this.canvas.height = window.innerHeight-30;
    window.scrollTo(0, 0);
  }
}

let canvasManager = new CanvasManager('controller');
canvasManager.resizeCanvas();
window.addEventListener("resize", canvasManager.resizeCanvas);

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="controller" style="border-style: solid;" width="300px" height="300px"></canvas>
    <script src="./test.js"></script>
  </body>
</html>

有什么想法为什么我会出错？

编辑：正如Heretic Monkey所指出的，此问题类似于'this' is undefined in JavaScript class methods。但是，作为新的编码器，我永远都不会想到这两个问题是相关的。我认为，如果其他人遇到类似问题而无法找出根本问题，则该帖子应该保留。

Answer 1

我认为这是因为this一词的上下文。请尝试更换：

window.addEventListener("resize", canvasManager.resizeCanvas);

使用：

window.addEventListener("resize", canvasManager.resizeCanvas.bind(canvasManager));

通过类方法调整HTML5画布的大小以响应调整大小事件

1 个答案: