Question

我正在上课的网站，我们应该传递主轴和短轴的参数。我可以传入它，但我无法将其转换为int。我已经阅读了所有其他文章，我可以找到，我知道我需要使用vr major = parseInt（），但是当我这样做时，我的椭圆形中什么都没有。如果你查看我下面的代码，你会看到我两次调用parseInt，但是当我把它们放到drawEllipse（）的调用中时，它不会绘制任何东西（相反，当我在调用中留下硬编码值时，它确实可以绘制。任何人都可以帮我这个吗？谢谢！有些代码已被删除以便于阅读，但它与该功能无关。

代码是：

<form action="Response.html" method="get">
  <section>
    <fieldset>
      <p2>
        <span id="EntireURL"></span>
      </p2>
      <p style="color: black">
        Major Axis: <span id="MajorAxis"></span>
        <br/>Minor Axis: <span id="MinorAxis"></span>
      </p>

      <p>
        <canvas id="thecanvas" width="500" height="350"></canvas>

        <script>
          var major = parseInt(MajorAxis);
          var minor = parseInt(MinorAxis);
          var canvas = document.getElementById('thecanvas');

          if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            drawEllipse(ctx, 10, 10, 100, 60);
          }

          function drawEllipseByCenter(ctx, cx, cy, w, h) {
            drawEllipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h);
          }

          function drawEllipse(ctx, x, y, w, h) {
            var kappa = .5522848,
              ox = (w / 2) * kappa, // control point offset horizontal
              oy = (h / 2) * kappa, // control point offset vertical
              xe = x + w, // x-end
              ye = y + h, // y-end
              xm = x + w / 2, // x-middle
              ym = y + h / 2; // y-middle

            ctx.beginPath();
            ctx.moveTo(x, ym);
            ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
            ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
            ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
            ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
            ctx.stroke();
          }
        </script>
      </p>
    </fieldset>
  </section>

  </div>
  <footer>
    Footer: <a href="http:\\www.cnm.edu">Central New Mexico Community College</a>
  </footer>
  <script>
    //Place entire url into inner text when page loads.
    document.getElementById("EntireURL").innerHTML = window.location.href;

     //Get first and last name and place it into page
    document.getElementById("MajorAxis").innerHTML = getParameterByName("majoraxis");
    document.getElementById("MinorAxis").innerHTML = getParameterByName("minoraxis");

     //Obtained from stackoverflow: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));

      var major = parseInt(MajorAxis);
      var minor = parseInt(MinorAxis);
    }
  </script>

</form>
</body>

</html>

Answer 1

您的代码存在一些问题。

您的函数getParametersByName正在设置局部变量major和minor。这些局部变量不仅不能在函数外部访问，而且这段代码在return语句之后，因此永远不会被执行。
该函数用于从URL查询字符串中获取值。你在querystring中传递值吗？
major和minor（下方）的初始分配在我看来，您应该拨打getParametersByName而不是parseInt

var major = parseInt(MajorAxis);

var minor = parseInt(MinorAxis);
MajorAxis和MinorAccess应该在javascript中定义为变量，如果您打算按照自己的方式使用它们。

你需要直接在自己的脑海中从中获取值（查询字符串，标记，以前存储在变量中）。此外，看起来你可能会对什么时候执行什么感到困惑。我这样说是因为我注意到你有代码在第一个脚本块中执行，然后再在第二个脚本块中执行。不是放下，我意识到你正在学习。

我可以提供更多建议，但看看你是否可以从我提供的内容中找到答案。

Answer 2

代码的两个主要问题阻碍了它的运行。

执行顺序不正确。第一个脚本元素在第二个脚本元素之前执行，并尝试从span元素中获取值。第二个脚本随后执行，并在span元素中设置值。因此，在第二个脚本元素之后放置第一个脚本元素以设置范围内容，然后再检索它们 - 或者在窗口加载完成后以正确的顺序执行两者。
BadRequestHttpException和parseInt(MajorAxis)使用(HTML5) named access on the window object访问HTMLSpanElements。仍然需要访问元素的文本内容，例如使用parseInt(MinorAxis)和parseInt(MajorAxis.textContent)。

Microsoft IE引入了对窗口对象使用命名访问权限，可能被某些人视为不安全或不良编码风格。

如果您解决了这两个问题，代码应该可以正常工作。如果您希望修改元素的访问方式并删除未使用的变量声明，请由您决定。

使用HTML / Javascript绘制椭圆

2 个答案: