Question

大家好，我是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>

Answer 1

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();

Answer 2

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

试试这个：

window.onload = init;

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

Answer 3

什么浏览器＆amp;您使用的版本？同时您可以尝试以下方法：

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

<body onload="init()">

没有调用javascript函数

3 个答案: