在函数或.js文件内绘制矩形[重复]答案

【问题标题】：Drawing Rectangle inside of function or .js file [duplicate]在函数或.js文件内绘制矩形[重复]
【发布时间】：2018-01-13 18:15:46
【问题描述】：

我在用 java 和 c++ 编码后开始学习 javascript，我正在尝试绘制一个矩形。如果我只是在正文中的脚本中正常编码，但我想让我的文件看起来整洁并且有一个函数，我可以在我的程序中调用更多的矩形。我已经用谷歌搜索了，但我仍然无法弄清楚如何做到这一点。

我尝试将函数放在 head 部分和我的 js 文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PacMan</title>

    <script scr="pac.js"></script>

    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //function drawRect(ctx, startX, startY, width, height, color){

            //ctx.beginPath();
           // ctx.rect(startX,startY,width,height);
           // ctx.fillStyle = color;
           // ctx.closePath();

       // }

    </script>

</head>
<body>

<canvas id="canvas" width="1000" height="720"></canvas>

<script>

drawRect(ctx,10,10,10,10, "#FF0000");

    
    // this works but i can not get the function to work
    //var canvas = document.getElementById("canvas");
    //var ctx = canvas.getContext("2d");
        //ctx.beginPath();
       // ctx.rect(900, 10, 50, 50);
       // ctx.fillStyle = "#FF0000";
        //ctx.fill();
       // ctx.closePath();

</script>

</body>
</html>

这是我创建的 .js 文件，试图让我的函数保持井井有条，这样它们就不会弄乱我的文件

function drawRect(ctx,h1,h2,w1,w2, color){

     //i tired at one point putting this into function
    //var canvas = document.getElementById("myCanvas");
   // var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.rect(20, 40, 50, 50);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();


}

【问题讨论】：

标签： javascript html draw

【解决方案1】：

如果我对您的理解正确，您想创建一个函数来绘制一些东西并可能能够在其他文件中重用它吗？

这是一个模拟工作函数https://jsbin.com/puneseyuca/edit?html,js,output 的工作示例。您还可以检查输出区域并检查 DOM 语义。

您应该遵循几件事才能使其正常工作。

将<script> 放在</body> 之前

<body>
    <!-- DOM -->
    // ...

    <!-- Scripts -->
    <script src="./path-to-your-js-file.js"></script>
</body>

大多数情况下，您会希望将 <script> 文件放在结束正文标记之前。此外，由于您没有使用任何框架，因此最好完全确定 DOM 已加载，因此您可以添加以下代码：

document.addEventListener("DOMContentLoaded", function(event) {
    // "DOM fully loaded and parsed"
    // Insert your code here
});

这对于 JS 能够从 DOM 中选择元素很重要，否则它们可能是未定义的。

创建一个全局变量，通常是 window.anything

⚠️ 应该避免这种情况以避免意外的突变和错误

我不赞成这种方法，但某些库就是这样通过命名空间到全局 window 对象来工作的。否则，在 1 个文件中设置的变量的范围是它，即不能从外部访问。

因此，您需要声明一个函数，然后将其保存到全局对象，即
内部，例如Duke.js
window.drawDuck = drawDuck

注意请务必检查您的 javascript 文件的顺序。声明全局变量的文件应该在使用它的文件之前。

总而言之，我相信你可以在没有全局变量的情况下做你想做的事。

希望我回答了你的问题。

编码愉快！

【讨论】：