使用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引入的，可能被一些人認爲是不安全或不好的編碼風格。

如果你解決了這兩個問題的代碼應該工作。如果您想修改元素的訪問方式並刪除未使用的變量聲明，則由您決定。