使用HTML/Javascript绘制椭圆

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查询字符串中获取值。你在查询字符串中传递值吗？

• 的major和minor（下）初始分配看起来像你对我应该叫应被定义为变量而不是parseInt

  var major = parseInt(MajorAxis);

  var minor = parseInt(MinorAxis);

• MajorAxis和MinorAccessgetParametersByName你的JavaScript，如果你打算以他们的方式使用它们。

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

我可以提供一些更多的建议，但看看你能否从我提供的内容中找出答案。

Answer 2

代码的两个主要主要问题阻止了它的工作。

1. 执行顺序不正确。第一个脚本元素在第二个脚本元素之前执行，并尝试从span元素中获取值。之后执行第二个脚本并在span元素内设置值。因此，在第二个脚本元素之后放置第一个脚本元素以在检索它们之前设置跨度内容 - 或者在窗口加载完成后以正确的顺序执行两个脚本元素。

2. parseInt(MajorAxis)和parseInt(MinorAxis)使用(HTML5) named access on the window object访问HTMLSpanElements。该元素的文本内容仍然需要被访问，例如通过使用parseInt(MajorAxis.textContent)和parseInt(MinorAxis.textContent)。

在窗口对象上使用命名访问是由微软IE引入的，可能被一些人认为是不安全或不好的编码风格。

如果你解决了这两个问题的代码应该工作。如果您想修改元素的访问方式并删除未使用的变量声明，则由您决定。