Wonderland Engine

title: Erstellen einer Textur mit Canvas2D description: Laufzeit-Generierung von Texturen mit dem JavaScript-Canvas. tags:

javascript options: prevnext: true menu: docs: parent: tutorials lang: de lastmod: 2025-10-07T08:15:22.000Z

Wenn Du benötigst, zur Laufzeit Texturen zu erstellen, um dynamisch darauf zu malen, solltest Du den CanvasRenderingContext2D in Betracht ziehen, der eine Menge von 2D-Zeichenmethoden des Browsers auf dem <canvas> Element bereitstellt.

Im Wonderland Engine erstellst Du eine Textur von einem Canvas über die TextureManager.create() API: this.engine.textures.create(canvas).

Beispiel

Unten findest Du das Beispiel von der CanvasRenderingContext2D MDN-Seite integriert in die Wonderland Engine:

import {Component, Property} from '@wonderlandengine/api';

export class MyCanvasTexture extends Component {
    static TypeName = 'my-canvas-texture';
    static Properties = {
        /* Setze dieses Material im Editor. Die Textur wird auf alle Objekte angewendet, die es nutzen. */
        material: Property.material()
    };

    start() {
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;

        const ctx = canvas.getContext('2d');
        /* Hier erfolgt Dein 2D-Zeichnen (dies ist das Beispiel von MDN) */

        // Weißer Hintergrund
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Füllfarbe zurück zu Schwarz ändern
        ctx.fillStyle = '#000';
        // Linienbreite setzen
        ctx.lineWidth = 10;

        // Wand
        ctx.strokeRect(75, 140, 150, 110);

        // Tür
        ctx.fillRect(130, 190, 40, 60);

        // Dach
        ctx.beginPath();
        ctx.moveTo(50, 140);
        ctx.lineTo(150, 60);
        ctx.lineTo(250, 140);
        ctx.closePath();
        ctx.stroke();

        /* Erstelle eine Textur aus dem Canvas via TextureManager */
        this.canvasTexture = this.engine.textures.create(canvas);
        /* Wende die Textur auf das Material an (verwende den generierten Setter) */
        this.material.setDiffuseTexture(this.canvasTexture);
    }
}

Aktualisieren nach einer Änderung

Nachdem Du ein Canvas nach der Erzeugung der initialen Textur verändert hast, stelle sicher, dass die Textur aktualisiert wird, um die Änderungen widerzuspiegeln.

Für das obige Beispiel würdest Du:

this.canvasTexture.update();

Um nur eine Teilregion für bessere Leistung zu aktualisieren, verwende stattdessen Texture.updateSubImage() :

// Aktualisiere einen 100x60 Bereich an der Zielposition (0, 0) aus der Quelle (28, 4)
this.canvasTexture.updateSubImage(28, 4, 100, 60, 0, 0, canvas);