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

Question

基于this HTML5 / JS游戏教程，我试图更改＆＃34;播放器＆＃34;从简单的颜色到图像。

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

我尝试编辑的代码就是这一部分：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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