window.onload返回一個函數

Question

我試圖創建一個功能，創建一個寬度和高度如何參數的畫布。 在另一個文件中我調用了createCanvas（200,200），但是控制台給我一個錯誤：

未捕獲的ReferenceError：未在main.js中定義createCanvas：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>