0
我在我的代码中遇到了一个问题，这导致我疯了。我将所有的代码和变量声明在一个外部的.js文件中，我试图将它们打印到一个将在JavaScript中创建的表中。这里是外部的.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>