创建多次作品，但不在for循环中
[英]Create multiple times works, but not in for-loop
问题描述
Have what I think seems like a kind of strange problem. 
我认为这似乎是一个奇怪的问题。 I have a function that is made to draw an element in HTML5. 我有一个功能可以在HTML5中绘制元素。 If i write it multiple times it is drawn those times, but if i place it in a loop it only draws the first time. 如果我多次编写它，则将绘制这些次，但如果将其放置在循环中，则它只会绘制一次。 Iv tried to monitor this by console.log for example but as soon as i try to draw this the loop is interrupted. iv试图通过console.log来监视它，但是一旦我试图绘制它，循环就会被中断。 It like there is some type of "break" function in it. 就像其中有某种“中断”功能一样。
Anyone who has an idea about this? 有人对此有想法吗？
<body>
<section id="wrapper">
<h1></h1>
<canvas id="canvas" width="800" height="600" style=" border-color: #000; border-style: solid; border-width: 1px;">
<p>Your browser doesn't support canvas.</p>
</canvas>
<script>
var context;
var canvas;
var WIDTH;
var HEIGHT;
$(document).ready(function() {
main_init();
});
function main_init() {
console.log("init");
WIDTH = $("#canvas").width();
HEIGHT = $("#canvas").height();
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var width = 10;
var height = 10;
var posX = 30;
var posY = 60;
//NOT WORKING
for(y = 1; y < height; y+=1)
{
for(x = 1; x < width; x+=1)
{
console.log("y:"+ y + " x:" + x);
//console.log(isEven(x));
if(isEven(x))
{
HexagonObj(posX * x, posY * y, 0.95);
}
else
{
HexagonObj(posX * x, (posY + 20) * y, 0.95);
}
}
}
//WORKING
HexagonObj(-30, 60, 0.95);
HexagonObj(10, 80, 0.95);
HexagonObj(50, 60, 0.95);
HexagonObj(-30, 100, 0.95);
}
HexagonObj = function(xCorrd, yCorrd, size){
//console.log("hexagon");
var x0=xCorrd; var y0=yCorrd; //cordinates
var xx=20 * size; var yy=20 * size; //size of the legs of the shape
x=x0; y=y0; context.moveTo(x,y);
x+=xx; y+=0; context.moveTo(x,y);
x+=xx; y+=0; context.lineTo(x,y);
x+=xx; y+=yy; context.lineTo(x,y);
x+=(xx*-1); y+=yy; context.lineTo(x,y);
x+=(xx*-1); y+=0; context.lineTo(x,y);
x+=(xx*-1); y+=(yy*-1); context.lineTo(x,y);
x+=xx; y+=(yy*-1); context.lineTo(x,y);
context.fillStyle = "#FFFF99";
context.fill();
context.strokeStyle = "rgba(0,0,0,1)";
context.stroke();
}
function isEven(n)
{
return parseFloat(n) && (n % 2 == 0);
}
</script>
</section>
</body>
I have marked the HexagonObj creation that works and that dose not work. 我已将HexagonObj创作标记为有效，但无效。
2 个解决方案
解决方案1
1 已采纳 2013-02-15 07:15:37
You need to declare x and y as variables in each function where they are used. 您需要在使用x和y每个函数中将它们声明为变量。 Because you are missing the var declaration, the functions are all accessing global x and y variables. 因为缺少var声明，所以函数都在访问全局x和y变量。 As a consequence, the first call to HexagonObj clobbers the loop variables in main_init() . 结果，对HexagonObj的第一次调用掩盖了main_init()的循环变量。
(Technically, you only need to declare var x, y in one of the functions to solve the immediate problem. However, it's bad form to be using global variables like that.) （从技术上讲，您只需要在一个函数中声明var x, y即可解决当前问题。但是，使用这样的全局变量是一种不好的形式。）
解决方案2
0 2013-02-15 07:19:12
for循环仅在main_init函数中执行一次，因为全局的x和y在HexagonObj函数内部已修改为y:81 and x:50
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.