0

有什么我认为似乎是一种奇怪的问题。我有一个用于在 HTML5 中绘制元素的函数。如果我多次写它，它会被绘制那些次，但如果我将它放在一个循环中，它只会绘制第一次。例如，我试图通过 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有效的创作和无效的创作。

4

2 回答 2

1

您需要在使用它们的每个函数中声明x和y作为变量。因为您缺少var声明，所以这些函数都在访问全局x和y变量。因此，第一次调用会HexagonObj破坏main_init().

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

于 2013-02-15T07:15:37.313 回答
0

for 循环在函数中只执行一次，main_init因为x和y哪些是全局的，在HexagonObj函数内部被修改为y:81 and x:50

于 2013-02-15T07:19:12.583 回答