功能将无法打印到画布

问题描述：

我在JavaScript中的视频游戏的工作，但我不能让我的功能打印在画布上。我没有收到任何错误，所以我无法确定为什么会发生这种情况。这个函数应该用图像的名字连接到一个单独的Images文件中存储的.png，一个x和y位置，图像的高度和宽度，以及要打印的画布和上下文。以下是我的代码。功能将无法打印到画布

function loadCanvas(){ 

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

//Sprite function 
var sprite = function(imageName, imageX, imageY, imageHeight, imageWidth, context, canvas){ 
    this.imageName = imageName; 
    this.imageX = imageX; 
    this.imageY = imageY; 
    this.imageHeight = imageHeight; 
    this.imageWidth = imageWidth; 
    this.canvas = canvas; 
    this.context = context; 
} 

//Sprite draw function 
sprite.prototype.draw = function(){ 
     var character = new Image(); 
     character.src = "../Images/" + this.imageName + ".png"; 
     var cont = this.context; 
     character.onload = function(){ 
      cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight); 
     } 
} 

sprite.prototype.getHeight = function(){ 
     return this.imageHeight; 
    } 

    sprite.prototype.getWidth = function(){ 
     return this.imageWidth; 
    } 

    sprite.prototype.getX = function(){ 
     return this.imageX; 
    } 

    sprite.prototype.getY = function(){ 
     return this.imageY; 
    } 

    sprite.prototype.moveUpX = function(e){ 
     this.imageX = (this.imageX + e); 
    } 

    sprite.prototype.moveUpY = function(e){ 
     this.imageY = (this.imageY + e); 
    } 

    sprite.prototype.moveBackX = function(e){ 
     this.imageX = (this.imageX - e); 
    } 

    sprite.prototype.moveBackY = function(e){ 
     this.imageY = (this.imageY - e); 
    } 

    sprite.prototype.changeImage = function(e){ 
     this.imageName = e; 
    } 

    sprite.prototype.getImage = function(){ 
     return this.imageName; 
    } 

    sprite.prototype.changeX = function(e){ 
     this.imageX = e; 
    } 

    sprite.prototype.changeY = function(e){ 
     this.imageY = e; 
    } 

    sprite.prototype.getContext = function(){ 
     return this.context; 
    } 

var sprites = []; 
sprites[1]= new sprite("RoomOne", 0, 0, 800, 400, context, canvas); 
sprites[1].draw(); 

}

这里是我的HTML，所有上面的代码被包裹在 “loadCanvas” 功能：

<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<script src = 'game.js'></script> 


</head> 

<body onload = "loadCanvas()"> 

<canvas id='canvas' width="800" height="400" style="border:0px solid #c3c3c3;"> 
This is not supported in your browser. 
</canvas> 


</body> 
</html>

你可以发布你的** html **吗？ –

我刚更新它，希望这有助于。谢谢。 – nnaiman16

答

在这行看看：

character.onload = function(){ 
    // "this" variable is not that you expect, 
    // "this" refers to "window" object. 
    // yon can try to console.log(this); 
    cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight); 
}

您需要通过预期的this才能运行，使用.bind(this)或将this保存在变量中功能外。

所以，溶液使用.bind：

//Sprite draw function 
sprite.prototype.draw = function(){ 
     var character = new Image(); 
     character.src = "../Images/" + this.imageName + ".png"; 
     var cont = this.context; 
     character.onload = function(){ 
      cont.drawImage(character, this.imageX, this.imageY, this.imageWidth, this.imageHeight); 
     }.bind(this); 
}

和使用可变的解决方案：

//Sprite draw function 
sprite.prototype.draw = function(){ 
     var character = new Image(); 
     character.src = "../Images/" + this.imageName + ".png"; 
     var cont = this.context; 
     var self = this; 

     character.onload = function(){ 
      cont.drawImage(character, self.imageX, self.imageY, self.imageWidth, self.imageHeight); 
     }; 
}

在JavaScript中阅读关于'this'的一些信息会对你有所帮助，因为它与其他语言的'this'有很大不同。我认为，[这]（http://www.quirksmode.org/js/this.html）链接将有所帮助。 –

非常感谢！ – nnaiman16

答

找到此代码段：

window.onload = function() { 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("scream"); 
ctx.drawImage(img,10,10);

};

不知道为什么你正在使用这一点。。

功能将无法打印到画布

相关推荐