Question

我在图表中有一些代码，我已经在画布中尝试了这个代码但是对于基于此代码的循环条件x＆amp; y值椭圆形状绘制画布。

我想如何在画布中添加for循环并绘制椭圆形状。

＆＃13;

#mycanvas{
    position:absolute;
    width:250px;
    height:400px;
    top:200px;
    left:200px;
}

＆＃13;

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

＆＃13;

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

＆＃13;

在该模态中，如何在for循环条件基础内的x和y值绘制椭圆图？

Answer 1

＆LT;画布＆GT;必须如this script with the last update from 2009所示关闭。

＆lt; canvas＆gt;上的SSLv3属性在双引号（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')可以使用here。并且html使用.val(...)属性。因此，代码变为.value。

我刻意触及你的代码结构......（我的意思是document.querySelector('#ipvalue').value函数）

checkFruit(...)

如何在画布中添加for循环？

1 个答案: