Question

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

我已经尝试将该功能放在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();


}

Answer 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个文件中设置的变量将作用于它，即无法从外部访问。

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

<强> N.B。请务必检查您的JavaScript文件的顺序。声明全局变量的文件应该在使用它的文件之前。

希望我回答你的问题。

快乐的编码！

在函数或.js文件中绘制矩形

1 个答案: