我如何得到定义在画布绘制循环之外的函数在循环内可用

How do I get functions defined outside of a canvas draw loop to be useable within the loop?

本文关键字：循环 函数 何得 定义 布绘制 绘制      更新时间：2023-09-26

我不能让这个简单的东西工作。

我在进入draw循环之前定义了一个函数。但这行不通。将函数中的代码直接放入循环中，它就会像魔法一样工作。我如何得到在绘制循环之外定义的函数在它内部工作?

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

当你在绘制之外定义它时，你使用的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);
            }
        }

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

    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);
            }
        }
相关文章：