画布在javascript中为空错误_Javascript_Html_Canvas

画布在javascript中为空错误

javascript html canvas

画布在javascript中为空错误,javascript,html,canvas,Javascript,Html,Canvas,我有以下代码： <!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.get

我有以下代码：

<!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>


画布{边框：#666 1px实心；}
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
playerimage=新图像（），
x=canvas.width/2，//与屏幕中心对齐
y=canvas.height/2，//同上
速度=5，//玩家移动的速度
宽度=50，//播放器的宽度
高度=50//运动员身高
函数init（）{
playerimage.src=“ninja.png”；//用于播放器的图像的路径
canvas.addEventListener（“按键”，更新）；
}
功能更新（事件）{
如果（event.keyCode==38）{
y-=速度；//上升
}
如果（event.keyCode==40）{
y+=速度；//下降
}
如果（event.keyCode==37）{
x-=速度；//向左转
}
如果（event.keyCode==39）{
x+=速度；//向右转
}
render（）；
}
函数render（）{
//clearRect（0，0，canvas.width，canvas.height）；
drawImage（playerimage，x，y，宽度，高度）；
}
画

javascript控制台总是给我画布为空错误

以下代码行存在两个问题：

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

它在分析canvas元素并将其添加到DOM之前运行

它使用了错误的ID

将其更改为：

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

…并将整个

块移动到正文的末尾，就在

之前，html中画布的id与中使用的id不匹配

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

正确的HTML应该是：

<canvas id="canvas" width="550" height="400"></canvas>

顺便说一句，用分号（

；

）代替逗号（

，

）来分隔javascript中的命令。@PetrR.-不是在声明多个变量的多行

var

语句中。@nnnnnn-我没有意识到这一点。我的错。