thetaとomegaのユーザー入力を使用してグラフをプロットする

私がしようとしているのは、正弦関数または余弦関数に対して周波数（オメガ）と位相（theta）を入力できるページを作成し、それをグラフにしますあなたが一度submitをクリックするとあなたのために。私はhttp://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/に式の実際のグラフを表示するチュートリアルをオンラインで見つけましたが、ユーザー入力はできません。これらの値をどのようにつかんでグラフ化方程式に挿入するのか分かりません。これは、コード内の入力ボックスに値を手動で割り当てる場合にのみ機能します。thetaとomegaのユーザー入力を使用してグラフをプロットする

<!DOCTYPE HTML> 
<html> 
    <head></head> 
    <body> 

    <form onsubmit="plot()"> 
    Omega:<input type="text" id="omega" value=2><br> 
    Theta:<input type="text" id="theta" ><br> 
    <input type="submit" value="submit"> 
    </form> 

    <canvas id="myCanvas" width="578" height="300"></canvas> 

    <script> 
    // Lots of code here for actually graphing the function. See the link for the entire code 

     // variables to grab the values 
     var omega=document.getElementById("omega").value; 
     var theta=document.getElementById("theta").value; 


     //function plot(){ 
      myGraph.drawEquation(function(x) { 
      return Math.sin(omega * x + theta); 
      }, 'green', 3); 
     //} 

    </script> 
    </body> 
</html>

出典

2016-05-23 rpipes

あなたは正しく、ユーザーのオメガ&シータ.valuesを取得しています。

document.getElementById('plot').onclick=function(){ 
 
     var x=1; 
 
     var omega=document.getElementById("omega").value; 
 
     var theta=document.getElementById("theta").value; 
 
     // Demo: Just show the values and the computed sine value 
 
     // In your code: send the values into your sine-plot code 
 
     alert('sine('+omega+'*1+'+theta+')=='+Math.sin(omega * x + theta)); 
 
};

Omega:<input type="text" id="omega" value=2><br> 
 
Theta:<input type="text" id="theta" value=10 ><br> 
 
<button id=plot>Plot</button><br>

：

今正弦関数値をフェッチし、再プロットボタンを作成

出典

2016-05-23 03:39:11 markE

thetaとomegaのユーザー入力を使用してグラフをプロットする

答えて

関連する問題