如何在画布中添加for循环？ [英] How to add the for loop inside the canvas?
本文介绍了如何在画布中添加for循环？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
#mycanvas {position：absolute; width：250px; height：400px; top：200px; left：200px;}
<！DOCTYPE HTML& ; html>< head>< link rel =stylesheettype =text / csshref =newellipse.css>< script src =jfile / myquery.js>< / script& < / head>< body>< input id =ipvaluetype =textvalue =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 =myCanvaswidth =578height = 400style =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（）; //告诉canvas开始一组行（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（）; //关闭结束到起点ctx.stroke（）; //实际绘制累计线函数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; （y）{case25x ^ 2 + 4y ^ 2 + 100x-40y = -100：text =椭圆公式x ^ 2 / a ^ 2 + y ^ 2 / b ^ 2 = 1 text1 =第一个RHS边值考虑1; text2 =LHS侧除以16的RHS值; text3 =取氨苄胺值的平方根; text4 =查找x和y值; 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;打破; // add the default keyword here}}< / script>< / body>< html>
$ b
你好，我在图形中有一些代码，我已经尝试这个代码在画布上，但对于循环条件基于这个代码x& y值椭圆形状绘制画布。
我想如何在画布中添加for循环并绘制椭圆形状。
<！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:10，y:18}，{x:10，y:18}，{x:0，y:20}，{x:10，y:0} ：-15}，{x：-15，y：0}，]}，]}）; chart.render（）; }< / script> < / head>< body>< div id =correctstyle =position：absolute; width：500px; height：70％; top：80px; left：250px;> < div id =chartContainerstyle =height：400px; width：100％;> < / div> < / div> < / body>< / html>
如何在x和y值的内部在for循环条件下绘制椭圆图。
请帮助我。
解决方案
< canvas&必须关闭，如此处所示。
style 属性on< canvas>必须在双引号（）前加上分号（; ）
html
< canvas id =myCanvaswidth =578height =400style =position：absolute; left：220px; top：50px;>< / canvas>
c>
我个人更喜欢 document.querySelector（...） $ c> document.getElementById（...）。
我自由增加省略号的行数从 20 到 1000 。
ReferenceError：id is not defined 。所以改为使用 document.querySelector（'＃ipvalue'）。
另请注意， .val（...）可以使用 jQuery 。html使用 .value 属性，因此代码变成 document.querySelector（'＃ipvalue' ）.value 。
我故意触摸你的代码结构...（我的意思是 checkFruit 。） function）
<！DOCTYPE HTML>
< html>
< head>
<！ - < link rel =stylesheettype =text / csshref =newellipse.css>
< script src =jfile / myquery.js>< / script> - >
< meta charset =UTF-8>
< / head>
< body>
< input id =ipvaluetype =textvalue =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 =myCanvaswidth =578height =400style =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（）; //告诉画布开始一组行
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（）; //实际绘制累计线
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）
{
case25x ^ 2 + 4y ^ 2 + 100x-40y = -100：
var text =椭圆公式x ^ 2 / a ^ 2 + y ^ 2 / b ^ 2 = 1;
var text1 =第一个RHS边值考虑1;
var text2 =LHS side divide by RHS value for 16;
var text3 =获取denaminater值的平方根;
var text4 =查找x和y值;
target.innerHTML = text;
target1.innerHTML = text1;
target2.innerHTML = text2;
target3.innerHTML = text3;
target4.innerHTML = text4;
break;
}
}
< / script>
< / body>
< html>
#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;
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>
Hi, I have some code in graph and I already try this code in canvas but for loop condition based in this code x&y value ellipse shape draw the canvas.
I want to how to add the for loop inside the canvas and plot the ellipse shape.
<!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>
In that modal how to x and y value inside the for loop condition base draw the ellipse graph.
Please help me.
解决方案
<canvas> must be closed as shown here.
The style attribute on <canvas> must have semicolon (;) before double-quote (").
html
<canvas id="myCanvas"width="578" height="400" style="position:absolute;left:220px;top:50px;"></canvas>
I personally prefer document.querySelector(...) over document.getElementById(...).
I took liberty to increase the number of lines for ellipsis from 20 to 1000.
My console says ReferenceError: id is not defined. So instead use document.querySelector('#ipvalue').
Also note that .val(...) works but with jQuery. And html uses .value property. So, the code become document.querySelector('#ipvalue').value.
I touched deliberately at your code structure... (I mean the checkFruit(...) function)
<!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>
这篇关于如何在画布中添加for循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
