画布中的HTML5图

Question

我是html5的新手，正在尝试在图形中显示一组代码。它适用于折线图，但由于某些我不知道的原因，它不适用于指数图。这是我的代码。

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

我也得到了很多my code here。

预先感谢我所得到的任何帮助。

<canvas id="graph5" width="400" height="300"></canvas>

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());     
} 

Answer 1

我不得不多次将width()和height()更改为width和height (它们是简单的属性)，从1开始测试数据，因为否则第一个值总是+infinity"，并存储数据和max而不是多次生成它们，但现在它似乎起作用了。

​

var data;	/* KEEP DATA AS A GLOBAL VARIABLE INSTEAD OF GENERATING IT AGAIN EACH TIME */
var graph;
var xPadding = 40;
var yPadding = 40;

function generateTestData5() // generates the array 
{
    var data = [];
    for(var i=1; 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-1] = sensfi;
    }
    return data;
}

function getMaxY5() {
    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) {
    return ((graph.width - 20) / data.length) * val + (20 * 1.5);
}

function getYPixel5(val) {
    return graph.height - (((graph.height - 20) / getMaxY5()) * val) - 20;
}

function draw5(){
    data = generateTestData5();	/* USE THE GLOBAL VARIABLE */
    var max = getMaxY5();	/* STORE MAX INSTEAD OF CHECKING IT MULTIPLE TIMES */
    graph = document.getElementById("graph5");
    var c = graph.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 < max; i += max/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);     
}

draw5();

<form>
<input name="f5" id="f5" value=8>
<input name="xpos5" id="xPos5" value=100>
<input name="sDI5" id="sDI5" value=6.4>
<input name="rI5" id="rI5" value=1280>
</form>
<canvas id="graph5" width="400" height="300"></canvas>

​