canvas 有问题

Question

你能帮帮我吗？ canvas 上未显示猫的图像。我不知道我的代码有什么问题。

Html:

<html>
<head>
    <link type="text/stylesheet" rel="stylesheet" href="style.css" />

</head>
<body>
    <center>
        <h1>Little Cat</h1>
        <canvas id="main" height="300" width="300"></canvas>
    </center>
    <script type="text/javascript" rel="javascript" src="script.js">Try another browser</script>
</body>
</html>

Javascript:

var canvas = document.getElementById('main'),
ctx = canvas.getContext('2d');


var catI = new Image();
    catI.src = "Image/cat.gif";



function Cat(x, y){
    this.x = x || 20, this.y = y || 50, this.img = catI, this.speed = 3,     this.keyInput = {};

this.display = function(){

    //control movements
    if(this.keyInput[38] === true){
        this.y -= this.speed;
    }
    if(this.keyInput[40] === true){
        this.y += this.speed;
    }
    if(this.keyInput[37] === true){
        this.x -= this.speed;
    }
    if(this.keyInput[39] === true){
        this.x += this.speed;
    }
    else{
        this.x += 0;
        this.y += 0;
    }

    //stay within the canvas
    if(this.x < 0){
        this.x = 0;
    }
    if(this.x >  canvas.width - 50){
        this.x = canvas.width - 50;
    }
    if(this.y < 0){
        this.y = 0;
    }
    if(this.y >  canvas.height - 50){
        this.y = canvas.height - 50;
    }

    ctx.drawImage(catI, this.x, this.y);
};

}

var cat = new Cat(50, 50);

document.addEventListener("keydown", function(e){
    cat.keyInput[e.keyCode] = true;
});

document.addEventListener("keyup", function(e){
    cat.keyInput[e.keyCode] = false;
});

function animate(){
    cat.display();
}


window.requestAnimationFrame(animate);

Answer 1

我推荐你使用 JSLint。所以你会发现问题所在。 Link: JSLint.com

试图找出您的代码有什么问题，但找不到。工作了一分钟，但我丢失了代码。

抱歉，祝你好运，如果我修复了它，我将编辑它:)

canvas 有问题

There is something wrong with the canvas

html

javascript

canvas

image

cat