Question

javascript的新手，这是我的第一个项目！我正在使用HTML Canvas和Javascript构建折线图。我有一个函数，可以为X和Y坐标生成随机数，然后填充一个空数组。我想绘制点并在阵列填充时将它们连接起来。最终目标是构建一个折线图，该折线图可根据这些点进行缩放。我知道代码有点混乱（我很抱歉），还有其他问题，但是我现在关注的问题是代码运行时先绘制点A，AB，ABC，ABCD等。希望它逐步绘制点，所以依次是A点，B点，C点，依此类推。希望这有道理！

从我从其他人那里看到的情况来看，似乎最好的方法是引用Array中的上一点，并确保到的线是从上一点开始的。我以为这就是我在这里所做的事情，或者至少是我试图做的事情。

// Return the x pixel for a graph point
function getXPixel(val) {
    return ((canvas.width - xMarg) / plotArray.length) * val + (xMarg);
}

// Return the y pixel for a graph point
function getYPixel(val) {
    return canvas.height - (((canvas.height - yMarg) / getMaxY()) * val) - yMarg;
}

function plotPoints() {
    ctx.strokeStyle = '#f00';
    ctx.beginPath();
    ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
    for (var i = 1; i < plotArray.length; i++) {
    ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
    }
    ctx.stroke();
    label();
    drawCircle();

}


function drawCircle() {
    ctx.fillStyle = '#333';
    for (var i = 0; i < plotArray.length; i++) {
        ctx.beginPath();
        ctx.arc(getXPixel(i), getYPixel(plotArray[i].Y), 4, 0, Math.PI * 2, true);
        ctx.fill();
    }
}

function setPlotHistory(){
    var plotHistory = plotArray.length
    plotArray[plotHistory.res] = {};
    plotArray[plotHistory.moveToX] = plotArray.X;
    plotArray[plotHistory.moveToY] = plotArray.Y;
}


runTest = setInterval(function() {
    var res = { //Create object of results with each test
        X: testsRun,
        Y: getRandomNumber(10,150)
    };
    if (plotArray.length === 5) {
        plotArray.shift();
    }
    plotArray.push(res); //put the result in the array
setPlotHistory(res);
    document.getElementById('output').innerHTML = "Tests Run: " + testsRun;
    testsRun++; //up the number of tests by one 
    plotPoints();

},testInt);

不确定，我应该提供多少信息，并且不想用整个代码填充页面，因此作为参考，您可以在https://jsfiddle.net/Crashwin/72vd1osL/3/这里查看我的完整代码

感谢您的帮助！

Answer 1

如果我正确理解了所需的结果，则应该清除画布并在每次调用时重画。这将需要重画轴。您可能需要在启动第一个计时器之前进行初始绘制以设置图形。

修改后的plotPoints函数：

//Draw the line graph
function plotPoints() {
  // clear the canvas for each draw. 
  ctx.clearRect(0,0,canvas.width,canvas.height);

  // put the axis back.
  drawAxis();

  // draw all points and lines.
  ctx.strokeStyle = '#f00';
  ctx.beginPath();
  ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
  for (var i = 1; i < plotArray.length; i++) {
    ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
  }
  ctx.stroke();
  label();
  drawCircle();
}

您应该将plotArray保持原样（不要删除点），以使其成为您的绘图历史。无需setPlotHistory（）。

还要在drawAxis函数中设置一次strokeStyle，否则它将采用plotPoints中定义的样式，即＃f00。

修改后的drawAxis函数：

function drawAxis() {
  // set axis stroke style
  ctx.strokeStyle = "#333";
  ctx.beginPath(); //new line
  ctx.moveTo(xMarg, 10); //move to (40, 10)
  ctx.lineTo(xMarg, canvas.height - yMarg); // line to (40, height - 40)
  ctx.lineTo(canvas.width, canvas.height - yMarg); // line to (width, height - 40)
  ctx.stroke(); //draw lines
}

此处的工作示例：https://jsfiddle.net/8yw5mouz/1/

Ps。这是一段相当不错的代码。我喜欢它的缩放比例。

在画布上绘制从坐标到坐标的渐进线时遇到问题

1 个答案: