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

Question

对 javascript 非常陌生，这是我的第一个项目！我正在使用 Html Canvas 和 Javascript 构建折线图。我有一个函数可以为 X 和 Y 坐标生成随机数，然后填充一个空数组。我想绘制点并在数组填充时连接它们。最终目标是构建一个基于点缩放的折线图。我知道代码有点乱（我很抱歉），还有其他问题，但我现在关注的问题是当代码运行时，它会绘制点 A，然后是 A B，然后是 A B C，然后是 A B C D，等等。我希望它逐步绘制点，所以它是点 A，然后是点 B，然后是点 C，等等。希望这是有道理的！

从我从其他人那里看到的，看起来最好的方法是引用数组中的前一个点，并确保 to 的行来自前一个点。我认为这就是我在这里所做的，或者至少是试图做的。

// 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/

附言。这是一段相当不错的代码。我喜欢它的扩展方式。