Javascript 用图像而不是颜色填充对象（将图像绘制到画布）

我正在创建一个Javascript游戏，想知道是否有人可以帮我处理这些对象。我希望有一个填充对象的图像，而不是填充对象的颜色。如何做到这一点

---

您可以使用

context.drawImage

来绘制播放器图像，而不是矩形。

请注意，图像加载需要时间，因此您必须在

playerImage.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);
    }
}

---

您可以使用

context.drawImage

来绘制播放器图像，而不是矩形。

请注意，图像加载需要时间，因此您必须在

playerImage.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);
    }
}

---

当你说“填充”这个物体时，你是什么意思？包含图像很容易，但如果您想开始将其拟合成各种形状，它会变得更复杂。@DBS我正在尝试以玩家的身份获取图像。在我的JSFIDLE示例中，我的播放器是蓝色的。我想用png文件代替蓝色。@Nielsvangils你们为什么要用画布？而不是简单的dom元素？关于你的问题，你不会用图像填充矩形，你只需创建另一个与矩形大小/位置相同的图像，当你说“填充”对象时，你的意思是什么？包含图像很容易，但如果您想开始将其拟合成各种形状，它会变得更复杂。@DBS我正在尝试以玩家的身份获取图像。在我的JSFIDLE示例中，我的播放器是蓝色的。我想用png文件代替蓝色。@Nielsvangils你们为什么要用画布？而不是简单的dom元素？另外，关于您的问题，您不会用图像填充矩形，您只需创建另一个项目，该项目是与矩形大小/位置相同的图像