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

我正在尝试通过 resizeCanvas()方法调整帆布元素，以响应调整大小事件。如果我直接调用类方法，则画布大小，但是在随后的电话中，我会通过事件处理程序获得以下错误：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指出的那样，此问题类似于JavaScript类方法中的"此"不确定。但是，作为一个新的编码员，我永远不会弄清楚这两个问题都是相关的。我认为，以防其他人有类似问题无法弄清基本问题，这篇文章应该保留。

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

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

with：

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

相关内容

最新更新

热门标签：