Canvas是在JavaScript

空的错误，我有这样的代码：Canvas是在JavaScript

<!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控制台总是给我的画布是空的错误

来源

2013-07-26 Sora

BTW，用分号（';'），而不是用逗号（'，'）来分隔javascript中的命令。 –

@PetrR。 - 不在声明多个变量的多行var语句中。 – nnnnnn

@nnnnnn - 我没有意识到这一点。我的错。 –

有两个问题与下面的代码行：

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

它在canvas元素被解析并添加到DOM之前运行。
它使用了错误的ID。

将其更改为：

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

...，只是</body>之前整个<script>块移动到身体的结束。

来源

2013-07-26 12:46:00 nnnnnn

你在HTML画布不符合您在

使用一个ID

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

正确的HTML应该是：

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

来源

2013-07-26 12:51:15 Madeyedexter

Canvas是在JavaScript

回答

相关问题