Beiträge von Horst

Horst

Zitat

Das this in der anonymen Funktion des onload ist ein anderes als das this im Objekt testImg

Danke, das war das Problem. Nun funktioniert es.

Horst

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.

Beiträge von Horst

Class member variable undefined

Class member variable undefined