Question

我是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'）; ¿我应该如何将Id从html文件传递给js函数？我应该使用：（''，“”，）还是应该创建一个新变量，用canvas的id启动它并将其传递给函数？我在JavaScript函数中处理好变量id吗？

Answer 1

你需要这样做：

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中的其他位置移动内联脚本使其工作。）

Answer 2

我想这个

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

应该是

var Canvas = document.getElementById(idCanvas);

使用那些撇号，你没有引用参数。

Answer 3

我想我知道为什么它不起作用。我在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 ，然后就可以了。无论如何，谢谢你的帮助。

使用函数将变量（id）从html传递到外部js文件

3 个答案: