HTML5中画布,画布html5中的图形

我是html5的新手并尝试在图表中显示代码数组。它适用于折线图，但出于某种原因我不知道是指数的。这是我的代码。

我的问题是，代码中是否有错误会破坏图表？(我确定代码中存在大量错误。)

我这里也有很多代码。

提前感谢我收到的任何帮助。

值包括：f5 = 8，xpos5 = 100，sDI5 = 6.4和rI5 = 1280。

function generateTestData5() // generates the array

{

var data = [];

for(var i=0; i<300; i++){

var sensfi = ((document.getElementById("f5").value)*(document.getElementById("xPos5").value)*(document.getElementById("f5").value))/((i*i*document.getElementById("sDI5").value)/(document.getElementById("rI5").value));

data[i] = sensfi;

}

return data;

}

var graph;

var xPadding = 40;

var yPadding = 40;

function getMaxY5() {

var data = generateTestData5();

var max = 0;

for(var i = 0; i < data.length; i ++) {

if(data[i] > max) {

max = data[i];

}

}

max += 10 - max % 10;

return max;

}

function getXPixel5(val) {

var data = generateTestData5();

return ((graph.width() - 20) / data.length) * val + (20 * 1.5);

}

function getYPixel5(val) {

var data = generateTestData5();

return graph.height() - (((graph.height() - 20) / getMaxY5()) * val) - 20;

}

function draw5(){

var data = generateTestData5();

graph = $('#graph5');

var c = graph[0].getContext('2d');

c.lineWidth = 2;

c.strokeStyle = '#333';

c.font = 'italic 8pt sans-serif';

c.textAlign = "center";

c.beginPath();

c.moveTo(xPadding, 0);

c.lineTo(xPadding, graph.height() - yPadding);

c.lineTo(graph.width(), graph.height() - yPadding);

c.stroke();

var x = 0;

for(var i = 0; i < data.length + 1; i ++) {

if(x==30) {

c.fillText(i, getXPixel5(i), graph.height() - yPadding + 20);

x=0;}

else {

x++;

}

}

c.textAlign = "right";

c.textBaseline = "middle";

for(var i = 0; i < getMaxY5(); i += getMaxY5()/10) {

c.fillText(i, xPadding-10, getYPixel5(i));

}

c.strokeStyle = '#f00';

c.beginPath();

c.moveTo(getXPixel5(0)+10, getYPixel5(data[0])-20);

for(var i = 1; i < data.length + 1; i ++) {

c.lineTo(getXPixel5(i)+10, getYPixel5(data[i])-20);

}

c.stroke();

//c.clearRect(0,0,graph.width(),graph.height());

}