功能將無法打印到畫布

我在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>

來源

2016-03-01 nnaiman16

你可以發佈你的** 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); 
     }; 
}

來源

2016-03-01 21:06:15

在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);

};

不知道爲什麼你正在使用這一點。。

來源

2016-03-01 21:11:49

功能將無法打印到畫布

回答

相關問題