Question

我尝试创建一个函数，创建一个宽度和高度如何参数的画布。在另一个名为createCanvas（200,200）的文件中，但控制台给出了一个错误：

未捕获的ReferenceError：未定义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>

window.onload返回一个函数

3 个答案: