javascript - 用图像而不是颜色填充对象(将图像绘制到 Canvas 上)

Question

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

JSFIDDLE

var PlayerX;

var canvas = document.getElementById("gamefield");
ctx = canvas.getContext("2d");

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.fillStyle="#00BFFF";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function Update () 
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    PlayerX.draw();
}

Answer 1

您可以使用context.drawImage来绘制playerImage而不是矩形。

请注意，加载图像需要一些时间，因此您必须在 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);
    }
}