Question

我对进入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)
    }
}

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

Answer 1

您的绘图功能位于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>

HTML5 - 我无法使用最简单的canvas元素。我究竟做错了什么？

1 个答案: