我无法让我的线条粗细正确响应修改后的输入

Question

在下面的代码片段中，我无法为我的正在进行的图形计算器获取 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 时才起作用，即会很好。此外，解决方案会有所帮助，但可能不是必需的。

Answer 1

您的问题在于您忘记在绘制每条线之前在您的上下文中执行 beginPath()。将此添加到您的 line 函数中即可达到目的：

function line(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

我无法让我的线条粗细正确响应修改后的输入

I can't get my line thickness to respond correctly to modified input

html

javascript

web

khan-academy