Javascript 是否可以从对象函数内部在画布上绘制?
我用JavaScript创建了一个对象,它保存context.drawImage()所需的所有数据。然后是否可以调用这些值并在对象函数中运行context.drawImage()Javascript 是否可以从对象函数内部在画布上绘制?,javascript,oop,object,canvas,prototype,Javascript,Oop,Object,Canvas,Prototype,我用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)
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);
};
是的,当然可以从对象函数内部在画布上绘制… 此代码有一个问题:
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\u sprite.src='someImage.png'
之后的行总是在图像完全加载之前执行
您始终需要通过使用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
in与您的代码一起使用,如下所示:
// 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';
当然有可能。只要定义了您使用的所有属性。在您的简短示例中,我看不出
context
从何而来。对于drawImage()
,它似乎接受加载的图像对象,而不是路径。this.imagePath指的是作为图像对象的world\u sprite。。我看看它是否不喜欢这样。imagePathNoo,这不是问题所在……好的,imagePath
对于图像对象来说是个坏名字。您没有评论上下文
变量的来源。感谢您提供了详细的回答。我没有提供足够的代码是因为我的程序有600行长。。。显示所有与该问题相关的代码将是相当多的。所以我把它浓缩了很多,遗漏了一些东西。不幸的是,这并没有解决我的问题。:/我会继续深入调查的。但是+1是一个很好的答案