7

私はこのコードを持っています:

<!DOCTYPE html>
<html>
 <head>
 <style type="text/css">
 canvas{border:#666 1px solid;}
</style>
<script type="text/javascript">

var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        playerimage = new Image(),
        x = canvas.width / 2, //align to centre of the screen
        y = canvas.height / 2, //same as above
        speed = 5, //speed for the player to move at
        width = 50, //width of the player
        height = 50; //height of the player

  function init() {


   playerimage.src = "ninja.png"; //path to the image to use for the player
   canvas.addEventListener("keypress", update);
  }

  function update(event) {
    if (event.keyCode == 38) {
        y -= speed; //going up
    }
    if (event.keyCode == 40) {
        y += speed; //going down
    }
    if (event.keyCode == 37) {
        x -= speed; //going left
    }
    if (event.keyCode == 39) {
        x += speed; //going right
    }
    render();
}

function render() {
   // context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(playerimage, x, y, width, height);

}
   </script>
 </head>
    <body onload="init();">
   <button onclick="init();">Draw</button>
    <canvas id="Mycanvas" width="550" height="400"></canvas>
   </body>  
  </html>

JavaScriptコンソールは常にcanvas is nullエラーを表示します

4

2 に答える 2

21

次のコード行には 2 つの問題があります。

var canvas = document.getElementById("canvas"),
  1. canvas 要素が解析されて DOM に追加される前に実行されます。
  2. 間違った ID を使用しています。

次のように変更します。

var canvas = document.getElementById("Mycanvas"),

...そして、<script>ブロック全体を本体の最後、 の直前に移動し</body>ます。

于 2013-07-26T12:46:00.347 に答える
2

HTML のキャンバスの ID が、使用している ID と一致しません

var canvas=document.getElementById("canvas");

正しい HTML は次のようになります。

<canvas id="canvas" width="550" height="400"></canvas>
于 2013-07-26T12:51:15.923 に答える