javascript函数未被调用

javascript function is not called

本文关键字：调用 函数 javascript      更新时间：2023-09-26

大家好，我是html5的新手，我写了一个小代码，我用java脚本在画布上显示两个矩形，但不知道我做错了什么，因为我的矩形没有显示在画布上。有人能指导我吗？这是我的代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#div2
{
    float:left;
    width:100px;
    height:200px;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;}
</style>
<body>
<div id= "div2">
<canvas id="canvas" width="100" height="150"></canvas> 
</div>
<script type="text/javascript">
function init() {
     var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");  
        ctx.fillStyle = "rgb(200,0,0)";  
        ctx.fillRect (10, 10, 55, 50);  
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
        ctx.fillRect (30, 30, 55, 50);}
init();
</script>
</body>
</html>

function init() {
    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");  
        ctx.fillStyle = "rgb(200,0,0)";  
        ctx.fillRect (10, 10, 55, 50);  
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
        ctx.fillRect (30, 30, 55, 50);}
init();

也许您在页面加载之前调用了脚本。

试试这个：

window.onload = init;

此外，在页面完全加载后，您应该尝试从Firebug调用init（）。它对我有效。

什么浏览器&您正在使用的版本？在此期间，您可以尝试以下操作：

尝试将脚本移动到代码的<head></head>部分，然后将onload属性添加到<body>标记中，如下所示：

<body onload="init()">
相关文章：