0

ある種の奇妙な問題のように思われることを持ってください。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。

4

2 に答える 2

1

と が使用される各関数で変数としてx宣言する必要があります。y宣言がないためvar、関数はすべてグローバル変数xとy変数にアクセスしています。結果として、 への最初の呼び出しによってHexagonObj、 のループ変数が上書きされmain_init()ます。

(技術的には、差し迫った問題を解決するために関数の 1 つを宣言するだけで済みますvar x, y。しかし、そのようなグローバル変数を使用するのは悪い形です。)

于 2013-02-15T07:15:37.313 に答える
0

forループは、関数内で1回だけ実行されます。これはmain_init、グローバルであり、関数内で次のように変更さxれるためです。yHexagonObjy:81 and x:50

于 2013-02-15T07:19:12.583 に答える