通過類方法調整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