2016-09-01 15 views
0

私はグラフにいくつかのコードを持っていますが、このコードをキャンバスで既に試しましたが、このコードに基づいたループ条件のためにx & y値の楕円形がキャンバスを描画します。forループをキャンバスの中に追加するには?

私は、キャンバスの内側にforループを追加し、楕円形をプロットする方法を知りたいと思います。ループ条件ベースのための内部そのモーダルで

#mycanvas{ 
 
    position:absolute; 
 
    width:250px; 
 
    height:400px; 
 
    top:200px; 
 
    left:200px; 
 
}
<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet"type="text/css" href="newellipse.css"> 
 
    <script src="jfile/myquery.js"></script> 
 
</head> 
 
<body> 
 

 
<input id="ipvalue" type="text" value="25x^2+4y^2+100x-40y=-100"> 
 
<button onclick="checkFruit()">solve</button> 
 

 
<p id="demo"></p> 
 
<p id="demo1"></p> 
 
<p id="demo2"></p> 
 
<p id="demo3"></p> 
 
<p id="demo4"></p> 
 

 
<canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px";> 
 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var step = 2*Math.PI/20; // see note 1 
 
var h = 150; 
 
var k = 150; 
 
var r = 80; 
 

 
ctx.beginPath(); //tell canvas to start a set of lines 
 

 
for(var theta=0; theta < 2*Math.PI; theta+=step) { 
 
    var x = h +  r*Math.cos(theta) ; 
 
    var y = k - 0.5 * r*Math.sin(theta) ; //note 2. 
 
    ctx.lineTo(x,y); 
 
} 
 

 
ctx.closePath();  //close the end to the start point 
 
ctx.stroke();  //actually draw the accumulated lines 
 

 
function checkFruit() { 
 
    var reg =/([\-+])?\s*(\d+)?([a-zA-Z])\b/g; 
 
\t 
 
    var equation = id("ipvalue").val(); 
 
    var spli = reg.exec(equation); 
 
    alert(spli); 
 
    var y = document.getElementById("ipvalue").value; 
 

 
    switch(y) { 
 
     case "25x^2+4y^2+100x-40y=-100": 
 
      text = "Formula for Ellipse x^2/a^2+y^2/b^2=1"; 
 
      text1= "First RHS side value consider for 1"; 
 
      text2= "LHS side divide by RHS value for 16"; 
 
      text3= "Take a square root of denaminater value"; 
 
      text4= "Find the x and y value"; 
 
\t 
 
      document.getElementById("demo").innerHTML = text; 
 
      document.getElementById("demo1").innerHTML = text1; 
 
      document.getElementById("demo2").innerHTML = text2; 
 
      document.getElementById("demo3").innerHTML = text3; 
 
      document.getElementById("demo4").innerHTML = text4; 
 
      break; 
 
    // add the default keyword here 
 
    } 
 
} 
 
</script> 
 
</body> 
 
<html>

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<script type="text/javascript"> 
 
window.onload = function() { 
 
    var chart = new CanvasJS.Chart("chartContainer", { 
 
     zoomEnabled: true, 
 
     title:{ 
 
      text: "Try Zooming And Panning" 
 
     }, 
 
     axisY:{ 
 
      includeZero: false 
 
     }, 
 
     title: { 
 
      text: "Graph" 
 
     }, 
 
     data: [{   
 
      type: "spline", 
 
      dataPoints: [ 
 
       { x:-15, y:0 }, 
 
       { x:-10, y:18 }, 
 
       { x:0, y:20 }, 
 
       { x:10, y:18 }, 
 
       { x:15, y:0 }, 
 
       { x:10, y:-18 }, 
 
       { x:0, y:-20 }, 
 
       { x:-10, y:-15 }, 
 
       { x:-15, y:0 }, 
 
      ]}, 
 
     ] 
 
    }); 
 
    chart.render(); 
 
} 
 
</script> 
 
</head> 
 

 
<body> 
 
<div id="correct"style="position:absolute;width:500px;height:70%;top:80px;left:250px;"> 
 
    <div id="chartContainer" style="height: 400px; width: 100%;"> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

方法のxおよびyの値は楕円グラフを描きますか?

+0

(私はcheckFruit(...)機能を意味する)...あなたのコードの構造で、意図的に触れ**どのようにループのために追加... **しかし、私は今、コードの束を参照してください。彼らは同じファイルか?明らかに、いいえ:しかし、あなたのファイルに名前をつけてください。そして、は必要ないと思います。 –

+0

yaその自分のjsファイルは不要です。 – pram

+0

CanvasJSは**グラフ作成アプリです** ...グラフ作成アプリをグラフ作成アプリ**の仕事をさせようとしています**。あなたは失敗のために自分自身を設定しています。 – markE

答えて

0

<キャンバス>は、hereのように閉じなければなりません。 <キャンバス>上

style属性は、二重引用符(")の前にセミコロン(;)を持っている必要があります。 html <canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas>

私は個人的にdocument.querySelector(...)よりもdocument.getElementById(...)を好んでいます。

省略記号の行数を20から1000に増加させました。

私のコンソールにはReferenceError: id is not definedと表示されています。代わりにdocument.querySelector('#ipvalue')を使用してください。

.val(...)でも動作しますが、jQueryとなります。そして、htmlは.valueプロパティを使います。したがって、コードはdocument.querySelector('#ipvalue').valueになります。

私はあなたというタイトル

<!DOCTYPE HTML> 
<html> 
    <head> 
     <!--<link rel="stylesheet"type="text/css" href="newellipse.css"> 
     <script src="jfile/myquery.js"></script>--> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <input id="ipvalue" type="text" value="25x^2+4y^2+100x-40y=-100"> 
     <button onclick="checkFruit()">solve</button> 

     <p id="demo"></p> 
     <p id="demo1"></p> 
     <p id="demo2"></p> 
     <p id="demo3"></p> 
     <p id="demo4"></p> 
     <canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas> 
     <script> 
      var canvas = document.querySelector("#myCanvas"); 
      var context2d = canvas.getContext("2d"); 

      var step = 2*Math.PI/1000; // see note 1 
      var h = 150; 
      var k = 150; 
      var r = 80; 

      context2d.beginPath(); //tell canvas to start a set of lines 

      for(var theta = 0; theta < 2*Math.PI; theta += step) 
      { 
       var x = h +  r*Math.cos(theta); 
       var y = k - 0.5 * r*Math.sin(theta); //note 2. 
       context2d.lineTo(x,y); 
      } 

      context2d.closePath();  //close the end to the start point 
      context2d.stroke();  //actually draw the accumulated lines 







      var splitter = /([\-+])?\s*(\d+)?([a-zA-Z])\b/g; 
      var source = document.querySelector('#ipvalue'); 

      var target = document.querySelector("#demo"); 
      var target1 = document.querySelector("#demo1"); 
      var target2 = document.querySelector("#demo2"); 
      var target3 = document.querySelector("#demo3"); 
      var target4 = document.querySelector("#demo4"); 

      function checkFruit() 
      { 
       var equation = splitter.exec(source.value); 

       console.log('SOURCE: ', source.value); 
       console.log('EQUATION: ', equation); 
       console.log('SUGGESTION: ', source.value.match(splitter)); 

       var y = source.value; 

       switch(y) 
       { 
        case "25x^2+4y^2+100x-40y=-100": 
         var text = "Formula for Ellipse x^2/a^2+y^2/b^2=1"; 
         var text1 = "First RHS side value consider for 1"; 
         var text2 = "LHS side divide by RHS value for 16"; 
         var text3 = "Take a square root of denaminater value"; 
         var text4 = "Find the x and y value"; 

         target.innerHTML = text; 
         target1.innerHTML = text1; 
         target2.innerHTML = text2; 
         target3.innerHTML = text3; 
         target4.innerHTML = text4; 
         break; 
       } 
      } 
     </script> 
    </body> 
<html> 
+0

セミコロンはスタイル属性の後にあります。この方法では、 'の代わりに' これは単なる注意。エラーの理由ではありません。 –

+0

ああ、私はあなたにそうするようアドバイスしたと思った。 – Kaiido

関連する問題