Question

我不知道为什么，但是当我尝试访问事件处理程序中的画布时，它返回为undefined。我的代码：

var example = function(){

    this.canvas = wind.document.createElement("canvas");
    this.canvas.height = wind.innerHeight;
    this.canvas.width =  wind.innerWidth;

    document.body.appendChild(canvas);

    window.addEventListener('resize', function(){
        this.canvas.height = wind.innerHeight; // Error here saying canvas is undefined
        this.canvas.width =  wind.innerWidth;
    }, false);

}

Answer 1

您的事件处理程序在与函数example不同的上下文中调用，因此this的值将不同（并且this.canvas将不存在）。

要引用原始画布，只需将其保存在变量中并使用闭包：

var cv = this.canvas = wind.document.createElement("canvas");
cv.height = wind.innerHeight;
cv.width =  wind.innerWidth;

document.body.appendChild(cv);

window.addEventListener('resize', function(){
    cv.height = wind.innerHeight;
    cv.width =  wind.innerWidth;
}, false);

Answer 2

我在一个简单的网页上测试了你的代码。通过结束标记在底部加载您的代码，在我看到风到窗口的任何地方都进行了更改。它得到了以下内容：

1）在浏览器控制台（大多数浏览器中为F12）中输入example（）; undefined //返回
2）打字画布;它返回：canvas height =＆＃34; 522＆＃34;宽度=＆＃34; 911＆＃34; //宽度的变化取决于我是缩小还是扩展窗口大小。

说明：我将该代码块放在底部，以便其他所有内容都加载到文档对象模型（DOM）中。然后我在浏览器控制台中调用该函数（步骤1）并返回undefined（不一定是坏事。例如在Ruby中，当你在IRB中创建一个函数时，它返回Nil。）。在这种情况下，未定义它告诉您函数示例在过去的某个时间成功创建并在步骤1中调用有几种方法可以调用函数，但如果你不调用它们;它只会坐在那里，在这种情况下什么都不做。

尝试在事件处理程序中访问时，画布返回为未定义

2 个答案: