0

この単純なことを機能させることはできません。

描画ループに入る前に関数を定義しています。しかし、それはうまくいきません。関数のコードを直接ループに入れると、魅力的に機能します。描画ループの外側で定義された関数を描画ループ内で動作させるにはどうすればよいですか?

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="500" height="500"></canvas>
        <script type="application/javascript">
            setInterval(draw,120);
            var canvas = document.getElementById('canvas');


            var dot = function(px,py) {
            fillStyle = "rgb(0,0,0)";
            ctx.fillRect(px,py,12,12)
            };

            function draw() {
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    dot(34,34);
                }
            }
        </script>
    </body>
</html>
4

1 に答える 1

1

draw の外で定義すると、使用している ctx は、js のスコープ規則のために異なります。あなたがすべきことは、コンテキストを関数に渡すことです。 

    var dot = function(ctx,px,py) {
        fillStyle = "rgb(0,0,0)";
        ctx.fillRect(px,py,12,12)
    };

        function draw() {
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                dot(ctx,34,34);
            }
        }

考慮できるもう 1 つのことは、キャンバスを頻繁に使用するため、コンテキストをキャンバスのようなグローバル変数にすることです。

    var ctx = canvas.getContext("2d");
    var dot = function(px,py) {
        fillStyle = "rgb(0,0,0)";
        ctx.fillRect(px,py,12,12)
     };

        function draw() {
            if (canvas.getContext) {
                dot(34,34);
            }
        }
于 2013-05-28T03:29:45.307 に答える