1

私は HTML5 のゲーム開発に興味があるので、当然のことながら、最初に取り組んだことの 1 つは 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 に答える