1

我对进入 HTML5 游戏开发很感兴趣，所以很自然地，我做的第一件事就是学习使用 canvas 元素。然而，尽管从众所周知的资源中学习并实际上复制粘贴了他们的代码，但我连画一个矩形都做不到。下面是我的 HTML 和 Javascript 的示例

<html>
<head>
    <link rel="stylesheet" type="text/css" href="mainStyle.css">

    <script src="mainScript.js"></script>

</head>
<body onload="draw();">

    <canvas id="tut" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>

</body>
</html>

function draw(){
    var c = document.getElementById("tut");
    if(c.getContext){
        var ctx = c.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, 50, 55, 50)
    }
}

我在这里错过了什么吗？任何帮助表示赞赏。

4

1 回答 1

2

您的绘图功能在html块之外。它需要在script标签内，例如

<script>
function draw(){
var c = document.getElementById("tut");
if(c.getContext){
    var ctx = c.getContext("2d");

    ctx.fillStyle = "rgb(200, 0 , 0)";
    // You were also missing a comma in this next line...
    ctx.fillRect(10, 10, 55, 50);

    // ...and also here.
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 50, 55, 50)
    }
}
</script>
于 2013-01-08T02:22:50.307 回答