1

我对javascript很陌生，我试图开发一个带有动态图的网页，用于该画布、html 5和javascript。我不想将 html“代码”与 javascript 代码混合，所以我决定将它分开并从 html 调用 javascript 函数。事实是，当我尝试将我的画布 ID传递给 javascript 函数时，我犯了一个错误，我不知道如何修复它。这是我的html代码：

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Funciones.js">
        window.onload = drawRectangulo('myCanvas');
    </script>
</head>
<body>
    <h1>Canvas Example:</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

我的 JavaScript 文件是这样的：

function drawRectangulo(idCanvas)
{
    var Canvas = document.getElementById('idCanvas');
    var context = Canvas.getContext('2d');
    context.fillRect(50,0,10,150);
}

我不知道对javascript文件上drawRectangulo函数的调用是否正确，以及我是否正确传递了画布的ID：window.onload = drawRectangulo('myCanvas'); ¿我应该如何将 html 文件中的 Id 传递给 js 函数？我应该使用: ('', "",) 还是应该创建一个新变量，使用画布的 id 启动它并将其传递给函数？我在 JavaScript 函数中处理好变量 id 吗？

4

3 回答 3

2

你需要这样做：

window.onload = function () {
    drawRectangulo('myCanvas');
}

您的代码在运行后立即调用drawRectangulo，并将调用结果（即undefined）分配给window.onload.

根据 Dan 的评论进行编辑：您还需要更改：

document.getElementById('idCanvas');

对此：

document.getElementById(idCanvas);

编辑 2：您还需要将导入的脚本与内联脚本分开，如下所示：

<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>

单个<script>元素可以从另一个文件导入脚本，或定义内联脚本，或两者兼而有之。（这就解释了为什么将内联脚本移动到 HTML 中的其他位置使其工作。）

于 2013-05-17T20:10:48.973 回答
1

我认为这

var Canvas = document.getElementById('idCanvas');

应该

var Canvas = document.getElementById(idCanvas);

有了这些撇号，您就没有引用参数。

于 2013-05-17T20:17:12.253 回答
0

我想我知道为什么它不起作用。我已经对 html 进行了更改，现在可以正常工作：

<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Funciones.js"></script>

</head>
<body>

    <script type="text/javascript" language="javascript">

        window.onload = function (){
            drawRectangulo('myCanvas');
        }
    </script>

    <h1>Canvas Example:</h1>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

我从标题中取出window.onload到正文中，它起作用了。还是要谢谢你的帮助。

于 2013-05-17T20:41:43.057 回答