ctx.fillStyle에 이미지 추가

Question

this html5 자바 스크립트 플랫폼 자습서를 찾았습니다. "플레이어"를 단순한 색상에서 이미지로 변경하려고합니다.

편집하려는 코드는 바로 여기에 있습니다.

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

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

여기에 더 많은 옵션을 참조하십시오 : https://www.w3schools.com/tags/canvas_drawimage.asp