用圖像填充對象，不用顏色（將圖像繪製到畫布上）

我創建了一個Javascript遊戲，並且想知道是否有人可以幫助我處理這些對象。而不是用顏色來填充物體，我想要一個填充物體的圖像。如何才能做到這一點？用圖像填充對象，不用顏色（將圖像繪製到畫布上）

var PlayerX; 

var canvas = document.getElementById("gamefield"); 
ctx = canvas.getContext("2d"); 

PlayerX = new Player(); 

function Player() 
{ 
    this.width = 30; 
    this.height = 50; 
    this.x = canvas.width/4; 
    this.y = canvas.height/3*2; 
    this.draw = function(){ 
     ctx.fillStyle="#00BFFF"; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

function Update() 
{ 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    PlayerX.draw(); 
}

來源

2016-05-14 Nielsvangils

當你說「填充」對象時，你是什麼意思？包括圖像很容易，但如果您想開始將其融入形狀，則會變得更加複雜。 – DBS

@DBS我想要獲得一個圖像作爲播放器。在我的JSFIDDLE示例中，我的播放器是藍色的。我試圖取得一個PNG文件，而不是藍色。 – Nielsvangils

@Nielsvangils你有什麼理由爲什麼要使用畫布？而不是簡單的DOM元素？也關於你的問題，你不會用圖像填充矩形，你只需創建另一個項目，這是一個圖像在矩形的相同大小/位置 –

您可以使用context.drawImage提請您playerImage，而不是一個矩形。

請注意，圖片加載需要一段時間，因此您必須在playerImage.onload回調內創建播放器。你還必須在這個onload中啓動你的遊戲循環。

var PlayerX; 

var canvas = document.getElementById("gamefield"); 
ctx = canvas.getContext("2d"); 

var playerImg=new Image(); 
playerImg.onload=start; 
playerImg.src="putYourImageHere.png"; 
function start(){ 
    PlayerX = new Player(); 
} 

function Player() 
{ 
    this.width = 30; 
    this.height = 50; 
    this.x = canvas.width/4; 
    this.y = canvas.height/3*2; 
    this.draw = function(){ 
     ctx.drawImage(PlayerImg,this.x, this.y); 
    } 
}

來源

2016-05-14 16:32:25 markE

用圖像填充對象，不用顏色（將圖像繪製到畫布上）

回答

相關問題