Проблема с глобальными переменными в моем файле JavaScript

Question

1. Почему предупреждение ("2") появляется первым?
2. Почему я не могу создать глобальные переменные c и ctx?

3. Как мне создатьэти две глобальные переменные, так что я могу использовать их в другой функции, например drawCircle ();

   //html5
   //<script type="text/javascript" src="my.js"></script>
   // ...
   //<canvas id="can" width="500" height="500></canvas>
   
   //my.js
   //The working code
   window.onload = drawRectangle;
   function drawRectangle() {
       var c = document.getElementById("can");
       var ctx = c.getContext("2d");
       ctx.fillStyle = "green";
       ctx.fillRect(50, 50, 200, 100);
   }  
   
   
   //my.js 
   //The non-working code 
   //alert function just for debugging  
   window.onload = init;
   var c;
   var ctx;
   function init() {
       alert("1");
       c = document.getElementById("can");
       ctx = c.getContext("2d");
   }
   function drawRectangle() {
       alert("2");
       ctx.fillStyle = "green";
       ctx.fillRect(50, 50, 200, 100);
   }
   drawRectangle();
   

   Если я создаю c и ctx как глобальные переменные в одном и том же файле HTML5, и он работает как следует.Почему не работает с внешним файлом javascript?

Answer 1

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

1. При загрузке страницы вызывается drawRectangle ().Однако переменные c и ctx не были инициализированы.Следовательно, он не будет рисовать прямоугольник.
2. До завершения загрузки страницы вызывается функция init (), переменные c и ctx также не были инициализированы.В результате прямоугольник не будет нарисован.

Answer 2

Вы звоните drawRectangle() до запуска init.Он использует глобальные переменные, как и ожидалось, но они все еще не инициализированы.Переместите вызов в функцию init:

var c;
var ctx;
function init() {
    alert("1");
    c = document.getElementById("can");
    ctx = c.getContext("2d");
    drawRectangle();
//  ^^^^^^^^^^^^^^^^
}
function drawRectangle() {
    alert("2");
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;

После этого вы можете (и должны) избегать глобальных переменных и просто передавать необходимые значения по аргументу:

function init() {
    var c = document.getElementById("can");
    var ctx = c.getContext("2d");
    drawRectangle(ctx);
//                ^^^
}
function drawRectangle(ctx) {
//                     ^^^
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;