window.onload 返回一个函数

Question

我试图创建一个函数来创建具有宽度和高度参数的画布。在另一个文件中我调用了 createCanvas(200,200)，但控制台给了我一个错误：

未捕获的引用错误：未定义 createCanvas 在 main.js:1"。

var context = undefined;
window.onload = function() {

  function createCanvas(w, h) {
    var canvas = document.createElement('canvas');

    if (context == undefined) {
      context = canvas.getContext('2d');

      width = canvas.width = h || 50;
      height = canvas.height = w || 50;
      document.body.appendChild(canvas);
    };
  };
  return createCanvas();
}

Answer 1

createCanvas 未在全局范围内定义，您正在引用它。

这就够了。

function createCanvas(w,h){
    var canvas = document.createElement('canvas');

    if(context == undefined){
        context = canvas.getContext('2d');

        width = canvas.width = h || 50; 
        height = canvas.height = w || 50;
        document.body.appendChild(canvas);
    }
}

当文档准备好时，在其他文件中执行：

 createCanvas(w,h)

Answer 2

您的 createCanvas 函数在 window.onload 事件处理程序中声明，这意味着它仅在本地声明，对其他代码不可见。此外，您不能从事件处理程序返回值。它不会被任何可以捕获返回值的代码部分调用。它作为“异步”函数运行。您以后可能会调查一些事情。

使其可用于其他代码的一种简单方法是将其分配给全局变量。例如

var  createCanvas;  *outside the onload event handler*

然后在你的事件处理程序中做

createCanvas = function(w,h){...

Answer 3

以下使用按钮为给定的宽度和高度创建画布。添加颜色只是为了确保它正常工作。

var context = undefined;
var btnCanvas = document.getElementById("createCanvas");

btnCanvas.addEventListener('click',function(e){
  createCanvas(200,200);
});

function createCanvas(w,h){
  var canvas = document.createElement('canvas');
  canvas.setAttribute("style","background-color: red;");

  if(context == undefined){
    context = canvas.getContext('2d');

    width = canvas.width = h || 50; 
    height = canvas.height = w || 50;
    document.body.appendChild(canvas);
  };
};
    

<button id="createCanvas">Create Canvas</button>