Question

我认为这似乎是一种奇怪的问题。我有一个用于在HTML5中绘制元素的函数。如果我多次写它会被绘制那些时间，但是如果我把它放在一个循环中它只会第一次绘制。 Iv试图通过console.log监视这个例子，但是一旦我尝试绘制它，循环就会被中断。就像它有一些类型的“休息”功能。

任何对此有所了解的人？

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

我已经标记了有效的HexagonObj创作，但不起作用。

Answer 1

您需要在使用它们的每个函数中声明x和y作为变量。由于您遗漏了var声明，因此这些函数都在访问全局x和y变量。因此，第一次调用HexagonObj会使main_init()中的循环变量变为现实。

（从技术上讲，你只需要在其中一个函数中声明var x, y来解决当前问题。但是，使用像这样的全局变量是不好的形式。）

Answer 2

for循环仅在函数main_init中执行一次，因为全局x和y在HexagonObj函数内修改为y:81 and x:50

创建多次工作，但不在for循环中

2 个答案: