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

Question

我试图通过resizeCanvas()方法调整画布元素的大小，以响应resize事件。 如果直接调用类方法，画布将调整大小，但是在随后通过事件处理程序的调用中，我将收到以下错误： 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” 。 但是，作为新的编码器，我永远都不会想到这两个问题是相关的。 我认为该帖子应该保留，以防其他人遇到类似问题而无法找出根本问题。

Answer 1

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

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

附：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-26 21:27:28

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-26 21:27:28

解决方案1
0 已采纳 2019-02-26 21:27:28