window.onload, возвращающий функцию

Question

Я попытался создать функцию, которая создает холст с шириной и высотой, как параметры. В другом файле я назвал createCanvas (200,200), но консоль дает мне ошибку:

Uncaught ReferenceError: createCanvas is not defined at 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 функция объявлена ​​внутри обработчика window.onload событий, что означает, что это только декларировала локально и не видно к другому коду. Кроме того, вы не можете вернуть значение из обработчика события. Он не вызывается какой-либо частью вашего кода, который мог бы захватить возвращаемое значение. Он работает как «асинхронная» функция. Что-то, что вы могли бы изучить позже.

Простым способом сделать его доступным для другого кода является присвоение его глобальной переменной. например

var createCanvas; *outside the onload event handler* 

, а затем в обработчике события делают

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

Answer 2

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 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>