Hallo Community,
beschäftige mich gerade mit HTML5 Und JS. Habe folgenden Code geschrieben und ich verstehe den Fehler nicht:
cute.js
Code
var cute = {};
cute.Image = class
{
constructor(imgUrl)
{
this.image = new Image();
this.image.src = imgUrl;
console.log(this.image); // <--- works
}
draw(context, x, y)
{
this.image.onload = function()
{
console.log(this.image); // <--- this.image = undefined
context.drawImage(this.image, x, y);
}
}
}
Alles anzeigen
Rufe ich die Klasse Image auf und will das Image Zeichnen, ist es Undefined:
main.js
Code
var canvas = new cute.Canvas(1024, 672);
canvas.setResponsive(dimension="both");
var testImg = new cute.Image("img/buttonTemplate.png")
testImg.draw(canvas.ctx, 0, 0); // <--- here "this.image" in class Image is undefined
/*
This works and "this.image" is NOT undefined
img = new Image();
img.src = "img/buttonTemplate.png";
img.onload = function()
{
canvas.ctx.drawImage(img, 0, 0);
}
*/
Alles anzeigen
erstelle ich das Image allerdings ohne meine Image-Klasse (ab Zeile 8 ) in der main.js, funktioniert es.
Ich kann mir dieses Verhalten absolut nicht erklären.