HTML5：将图像添加为画布元素

Question

基于this HTML5 / JS游戏教程，我试图将“播放器”从简单的颜色改为图像。

如何将图像添加到画布元素？

我正在尝试编辑的代码就在这里：

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