[英]Is it possible to draw on the canvas from inside an object function?
I've created an object in JavaScript which holds all data needed for context.drawImage(). 我已经在JavaScript中创建了一个对象,该对象包含context.drawImage()所需的所有数据。 Is it then possible to call those values and run context.drawImage() inside an object function?
然后可以调用这些值并在对象函数中运行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);
};
Yes, of course you can draw on the canvas from inside an object function... 是的,您当然可以从对象函数内部在画布上进行绘制...
This code has a problem: 此代码有问题:
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();
The browser always loads images asynchronously. 浏览器始终异步加载图像。 So in the above code, the line after
world_sprite.src='someImage.png'
is always executed before the image is fully loaded. 因此,在上面的代码中,始终在完全加载图像之前执行
world_sprite.src='someImage.png'
之后的行。
You always need to give your new Image
s time to load by using their onload
callback . 您始终需要使用它们的
onload
回调给new Image
加载时间 。
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';
So you would use onload
in with your code like this: 因此,您可以在代码中使用
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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.