Question

我在JavaScript中创建了一个对象，它包含了context.drawImage（）所需的所有数据。那么可以调用这些值并在对象函数中运行context.drawImage（）吗？

world = new Sprite(0, 0, 100, 100, 0.4, 0, 0, 0);
world.draw();

function Sprite(spriteX, spriteY, spriteW, spriteH, scale, positionX, positionY, direction)
            {
                this.imagePath = world_sprite;
                this.spriteX = spriteX;
                this.spriteY = spriteY;
                this.spriteW = spriteW;
                this.spriteH = spriteH;
                this.scale = scale;
                this.positionX = positionX;
                this.positionY = positionY;
                this.direction = direction;
                this.speed = 5;

                this.noGravity = false;
                this.direction = 0;

                //Physics stuff
                this.velX = 0;
                this.velY = 0;
                this.friction = 0.98;
            };
Sprite.prototype.draw = function()
            {
                context.drawImage(this.imagePath, this.spriteX, this.spriteY, this.spriteW, this.spriteH, this.positionX, this.positionY, this.spriteW * this.scale, this.spriteH * this.scale);
            };

Answer 1

是的，当然你可以在对象函数内部绘制画布......

此代码存在问题：

var world_sprite=new Image();
world_sprite.src='someImage.png';

// This next line is executed too early!
// The code attempts (fails) to drawImage world_sprite
// because it has not fully loaded yet
world = new Sprite(0, 0, 100, 100, 0.4, 0, 0, 0);
world.draw();

浏览器始终异步加载图像。因此，在上面的代码中，world_sprite.src='someImage.png'之后的行总是在图像完全加载之前执行。

您始终需要使用new Image回拨来加载onload的时间。

var world_sprite=new Image();
world_sprite.onload=function(){
    alert('I am displayed when world_sprite is fully loaded and ready to be used in `drawImage`);
};
world_sprite.src='someImage.png';

因此，您可以使用onload代码，如下所示：

// Create your Sprite "class"
function Sprite(spriteX, spriteY, spriteW, spriteH, scale, positionX, positionY, direction){
    this.imagePath = world_sprite;
    this.spriteX = spriteX;
    this.spriteY = spriteY;
    this.spriteW = spriteW;
    this.spriteH = spriteH;
    this.scale = scale;
    this.positionX = positionX;
    this.positionY = positionY;
    this.direction = direction;
    this.speed = 5;

    this.noGravity = false;
    this.direction = 0;

    //Physics stuff
    this.velX = 0;
    this.velY = 0;
    this.friction = 0.98;
};
Sprite.prototype.draw = function(){
    context.drawImage(this.imagePath, this.spriteX, this.spriteY, this.spriteW, this.spriteH, this.positionX, this.positionY, this.spriteW * this.scale, this.spriteH * this.scale);
};


// create and load world_sprite
var world_sprite=new Image();
world_sprite.onload=function(){
    // Only now is the world_sprite fully loaded and
    // ready to be used in drawImage.
    // So now create a new Sprite and do .draw()
    world = new Sprite(0, 0, 100, 100, 0.4, 0, 0, 0);
    world.draw();
};
world_sprite.src='someImage.png';

是否可以从对象函数内部绘制画布？

1 个答案: