외부 .js 파일의 변수 인식

내 코드에 문제가있어 견과류를 몰고 있습니다. 내 모든 코드와 변수가 외부 .js 파일에 선언되어 있고 자바 스크립트로 작성 될 테이블에 이들을 인쇄하려고합니다. 다음은 외부 .js 파일과이 파일을 참조하는 HTML입니다.외부 .js 파일의 변수 인식

loadImage.js

var pos = []; 
var xAvg; 
var yAvg; 
var cirCtr; 
var radAvg; 

var defAvg; 
var comPer; 

var img=new Image(); 
img.onload=function(){ 
    var can = document.getElementById('C'); 
    var ctx = can.getContext('2d');   //creates canvas and image data 
    ctx.drawImage(img, 0, 0); 
    var imgdata = ctx.getImageData(0,0, img.width, img.height); 
    var data = imgdata.data; 


var index = []; 
var vertical; 
var horizontal; 

for (var i = 0; i < data.length; i += 4) { 
    if (data[i] == 255) {     //finds position of piexel in data array 
     index.push(i); 
    } 
} 

for (var i = 0; i < index.length; i++) { //finds coordinate postion of pixel 

    var vertical = 
    Math.floor((index[i]/4)/400); 

    var horizontal = 
    Math.floor((index[i]/4) % 400); 

    pos.push(horizontal, vertical); 

} 



var xTot = 0; 
var yTot = 0; 


for (var i = 0; i < pos.length; i+=2){ 
    xTot = xTot + pos[i];    //finds x value of circe center 
    xAvg = xTot/((pos.length+1)/2); 
}; 
for (var j = 1; j < pos.length; j+=2){ 
    yTot = yTot + pos[j];    //finds y value of circle center 
    yAvg = yTot/((pos.length+1)/2); 
}; 

cirCtr = [xAvg, yAvg]; 
alert("The center of the circle is " + cirCtr); 

var radTot = 0; 

//finds average radius of traced circle 
for (var i = 0; i < pos.length; i+=2){ 
    radTot = radTot + Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2)); 
    radAvg = radTot/((pos.length+1)/2); 

} 
var defTot = 0; 

for (var i = 0; i < pos.length; i+=2) { 
    defTot = defTot + (Math.abs(Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2)) - radAvg)); 
    defAvg = defTot/((pos.length+1)/2); 
} 

comPer= 100 * ((Math.PI * Math.pow(radAvg,2))/(Math.PI * Math.pow((radAvg + defAvg), 2))); 

alert(defTot); 

alert("The radius of the circle is " + radAvg); 

} 
img.crossOrigin="anonymous"; //this had to do with the DOM Exception 18 thing 
img.src="https://dl.dropboxusercontent.com/u/196150873/tile_0000_session_23220.skl.png";

되는 HTML

<html> 
<head> 
    <script src="loadImage.js" type="text/javascript"></script> 
    <script> function();</script> 
</head> 
<body> 
    <h1>200 Circles</h1> 
    <canvas id="C" height="400" width="400"></canvas> 
    <div> 
     <table border="1"> 
      <thead> 
       <tr> 
        <th>Center</th> 
        <th>Regular Radius</th> 
        <th>Derived Radius</th> 
        <th>Area proportionality</th> 
       </tr> 
      </thead> 
      <tbody id="log"></tbody> 
     </table> 
    </div> 
    <script> 
     for (var i=0; i < 10; i++) { 
      addRow(); 
     } 
     function addRow() { 

      var newRow = 
      "<tr>" + 
      "<td>" + cirCtr + "</td>" + 
      "<td>" + radAvg + "</td>" + 
      "<td>" + (radAvg + defAvg) + "</td>" + 
      "<td>" + comPer + "</td>" + 
      "</tr>"; 
      document.getElementById("log").innerHTML += newRow; 
     } 
    </script> 
<body> 
</html>

출처

2013-07-30 user2517142