时间戳

首页 > 解决方案 > 在画布中绘制从坐标到坐标的渐进线时遇到问题

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

问题描述

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

任何帮助表示赞赏！

标签： javascriptcanvashtml5-canvas

解决方案

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

修改后的 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/

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

推荐阅读