私はグラフにいくつかのコードを持っていますが、このコードをキャンバスで既に試しましたが、このコードに基づいたループ条件のために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の値は楕円グラフを描きますか?
(私は
checkFruit(...)
機能を意味する)...あなたのコードの構造で、意図的に触れ**どのようにループのために追加... **しかし、私は今、コードの束を参照してください。彼らは同じファイルか?明らかに、いいえ:しかし、あなたのファイルに名前をつけてください。そして、は必要ないと思います。 –yaその自分のjsファイルは不要です。 – pram
CanvasJSは**グラフ作成アプリです** ...グラフ作成アプリをグラフ作成アプリ**の仕事をさせようとしています**。あなたは失敗のために自分自身を設定しています。 – markE