0

我的代码中有一个问题让我发疯。我在一个外部 .js 文件中声明了所有代码和变量，我正在尝试将它们打印到一个将在 Javascript 中创建的表中。这是外部 .js 文件和引用它的 HTML。

加载图像.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>
4

1 回答 1

1

当您引用这些变量时，我们的问题是 .js 文件尚未加载。

我会使用 jquery 就绪事件 - http://api.jquery.com/ready/

如果您不能使用 jquery，请查看此问题的答案 - $(document).ready 等效于没有 jQuery

另一种选择是将两个脚本保存在同一位置，无论是在 js 文件中还是在 html 中。

于 2013-07-30T19:33:47.400 回答