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 之外定义它时，由于 js 的范围规则，您使用的 ctx 会有所不同。您应该做的是将上下文传递给函数。 

    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);
            }
        }

您可以考虑的另一件事是使上下文成为像画布一样的全局变量，因为您将经常使用它。

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