ctx.fillStyleに画像を追加

Question

私はthis html5 JavaScriptプラットフォームのチュートリアルを見つけました。私は単純な色からイメージに "プレーヤー"を変更しようとしています。

私が編集しようとしているコードは、この部分です。

player.x += player.velX; 
 
    player.y += player.velY; 
 

 
    ctx.fill(); 
 
    ctx.fillStyle = "green"; 
 
    ctx.fillRect(player.x, player.y, player.width, player.height); 
 

 
    requestAnimationFrame(update);

Answer 1

player.x += player.velX; 
player.y += player.velY; 

var img = new Image(); 
img.src = "linkToYourImage.jpg"; 
//Can be any extension (png, etc.) 

ctx.drawImage(img, player.x, player.y, player.width, player.height); 

requestAnimationFrame(update); 

ここでより多くのオプションを参照してください：https://www.w3schools.com/tags/canvas_drawimage.asp