Я не могу заставить свою толщину линии правильно реагировать на измененный ввод

В следующем фрагменте кода я не могу получить толщину оси Y для моего графического калькулятора незавершенного производства, чтобы он правильно реагировал на переменную axes.y.thickness.

            var axes = {
              x: {
                show: true,
                keepOnScreen: false,
                thickness: 1,
                color: {
                  red: 0,
                  blue: 0,
                  green: 0
                }
              },
              y: {
                show: true,
                keepOnScreen: false,
                thickness: 10,
                color: {
                  red: 0,
                  blue: 0,
                  green: 0
                }
              }
            };

            function drawAxes() {
              strokeWeight(axes.x.thickness);
              strokeColor(axes.x.color.red, axes.x.color.green, axes.x.color.blue);
              if (axes.x.show) {
                if (axes.x.keepOnScreen && sign(range.x.min) === sign(range.x.max) && sign(range.x.min) !== 0) {
                  if (sign(range.x.min) === -1) {
                    line(400, 0, 400, 400);
                  } else {
                    line(0, 0, 0, 400);
                  }
                } else {
                  line(map(0, range.x.min, range.x.max, 0, 400), 0, map(0, range.x.min, range.x.max, 0, 400), 400);
                }
              }
              strokeWeight(axes.y.thickness);
              strokeColor(axes.y.color.red, axes.y.color.green, axes.y.color.blue);
              if (axes.y.show) {
                if (axes.y.keepOnScreen && sign(range.y.min) === sign(range.y.max) && sign(range.y.min) !== 0) {
                  if (sign(range.y.min) === -1) {
                    line(0, 0, 400, 0);
                  } else {
                    line(0, 400, 400, 400);
                  }
                } else {
                  line(0, map(0, range.y.min, range.y.max, 0, 400), 400, map(0, range.y.min, range.y.max, 0, 400));
                }
              }
            };
            drawAxes();

Это вся программа:

<!DOCTYPE html>
<html>

<head>
  <style>
    canvas {
      border: 1px solid #000000;
    }
  </style>
  <meta charset="utf-8">
  <title>Graphing Calculator 2.0</title>
</head>

<body>
  <canvas id="canvas" width="400" height="400">Error: Your browser does not support HTML 5 canvases.</canvas>
  <script>
    //reference: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
     //math object: http://www.w3schools.com/js/js_math.asp
     //TODO: define map and lerp functions
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    function rgb(red, green, blue) {
      return "rgb(" + red + "," + green + "," + blue + ")";
    }

    function map(value, low1, high1, low2, high2) {
      return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
    }

    function lerp(num1, num2, amount) {
      return map(amount, 0, 1, num1, num2);
    }

    function strokeColor(red, green, blue) {
      ctx.strokeStyle = rgb(red, green, blue);
    }

    function strokeWeight(weight) {
      ctx.lineWidth = weight;
    }

    function line(x1, y1, x2, y2) {
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
    }
    var colors = {
      background: {
        red: 0,
        green: 0,
        blue: 255
      },
      f: {
        red: 0,
        green: 171,
        blue: 0
      }
    };
    var pos = {
      x: 0,
      y: 0
    };
    var sign = function(number) {
      if (number === 0) {
        return 0;
      } else {
        return (abs(number)) / number;
      }
    };
    var range = {
      x: {
        max: 50,
        min: -10
      },
      y: {
        max: 10,
        min: -10
      }
    };
    var axes = {
      x: {
        show: true,
        keepOnScreen: false,
        thickness: 1,
        color: {
          red: 0,
          blue: 0,
          green: 0
        }
      },
      y: {
        show: true,
        keepOnScreen: false,
        thickness: 10,
        color: {
          red: 0,
          blue: 0,
          green: 0
        }
      }
    };

    function f(x, y) {
      var leftSide = x;
      var rightSide = sq(y) - 5;
      return abs(leftSide - rightSide) <= 1;
    }

    function drawAxes() {
      strokeWeight(axes.x.thickness);
      strokeColor(axes.x.color.red, axes.x.color.green, axes.x.color.blue);
      if (axes.x.show) {
        if (axes.x.keepOnScreen && sign(range.x.min) === sign(range.x.max) && sign(range.x.min) !== 0) {
          if (sign(range.x.min) === -1) {
            line(400, 0, 400, 400);
          } else {
            line(0, 0, 0, 400);
          }
        } else {
          line(map(0, range.x.min, range.x.max, 0, 400), 0, map(0, range.x.min, range.x.max, 0, 400), 400);
        }
      }
      strokeWeight(axes.y.thickness);
      strokeColor(axes.y.color.red, axes.y.color.green, axes.y.color.blue);
      if (axes.y.show) {
        if (axes.y.keepOnScreen && sign(range.y.min) === sign(range.y.max) && sign(range.y.min) !== 0) {
          if (sign(range.y.min) === -1) {
            line(0, 0, 400, 0);
          } else {
            line(0, 400, 400, 400);
          }
        } else {
          line(0, map(0, range.y.min, range.y.max, 0, 400), 400, map(0, range.y.min, range.y.max, 0, 400));
        }
      }
    };
    drawAxes();
  </script>
</body>

</html>

Если кто-то может помочь мне выяснить, почему переменная axes.x.thickness отвечает идеально, но переменная axes.y.thickness работает только тогда, когда ее значение больше значения axes.x.thickness, это было бы здорово. Кроме того, решение будет полезно, но, возможно, не обязательно.

Источник

1 ответ

Решение

Ваша проблема заключается в том, что вы забыли выполнить beginPath() в вашем контексте, прежде чем рисовать каждую линию. Добавив это в свой line функция делает свое дело:

function line(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}
Источник
Другие вопросы по тегам