캔버스 내부에 for 루프를 추가하는 방법은 무엇입니까?

그래프에 몇 가지 코드가 있지만이 코드를 캔버스에서 이미 시도했지만이 코드를 기반으로 한 루프 조건의 경우 x & y 값 타원 셰이프가 캔버스를 그립니다.캔버스 내부에 for 루프를 추가하는 방법은 무엇입니까?

캔버스 내부에 for 루프를 추가하고 타원 모양을 그려 보는 방법을 알고 싶습니다.

For 루프 조건베이스 내부 X 및 Y 값은 상기 타원의 그래프를 그리는 방법을 그 모달

#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>

출처

2016-09-01 pram

당신은 제목 ... 당신의 코드 구조에 의도적으로 만졌다. 그들은 같은 파일에서 왔습니까? 분명히 아니요. 그러나 파일의 이름을 지정하십시오. 그리고 은 필요하지 않습니다. –

나중에 내 자신의 js 파일이 필요하지 않습니다. – pram

CanvasJS는 ** 차트 응용 프로그램입니다 ** ... 차트 응용 프로그램을 ** 그래프 응용 프로그램 **의 일을하려고합니다. 당신은 실패에 대한 자신을 설정합니다. – markE

< 캔버스 >은 그림과 같이 닫아야합니다 (here). < 캔버스 >에 style 속성은 세미콜론이 있어야합니다

(;) 따옴표 (") 전. html <canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas>

저는 개인적으로 보다 document.querySelector(...)을 선호합니다.

줄임표 줄 수를 20에서 1000으로 늘리는 데 자유를 보냈습니다.

내 콘솔에 ReferenceError: id is not defined이라고 표시됩니다. 대신 document.querySelector('#ipvalue')을 사용하십시오.

또한 .val(...)이 작동하지만 jQuery과 함께 사용됩니다. 그리고 html은 .value 속성을 사용합니다. 따라서 코드는 document.querySelector('#ipvalue').value이됩니다.

나는 ** ... 루프에 대한 추가하지만 지금은 코드의 무리를 참조하는 방법 ** (필자는 checkFruit(...) 기능을 의미)

<!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>

출처

2016-09-01 08:48:00

세미콜론은 스타일 속성 뒤에 있습니다. 이 방법은'

아, 그래, 그렇게하도록 권고받은 줄 알았는데. – Kaiido

캔버스 내부에 for 루프를 추가하는 방법은 무엇입니까?

답변

관련 문제