canvas : Bilder horizontal spiegeln

Jofre

Erfahrenes Mitglied
Einen schönen Tag,

gibt es bei Canvas die Möglichkeit ein Bild horizontal zu spiegeln .
Irgendwo habe ich mal was gesehen mit scaleX.
Klappt bei mir allerdings nicht

GzG

Joachim
 
Hallo Joachim,
hier ist ein Canvas-Beispiel: CanvasRenderingContext2D.drawImage()

Und hier ist das Beispiel leicht modifiziert:
Javascript:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

ctx.scale(1, -1); // horizontal spiegeln
ctx.drawImage(image, 50, 50, 104, 124, 30, -30, 87, -104);
Du musst ein bisschen mit den Werten spielen. Aber im Prinzip läuft es darauf hinaus, dass du einfach die Skalierung des Canvas veränderst. Ich habe das Bild hier auf den Kopf gestellt (du kannst aber natürlich auch horizontal spiegeln).

Gruß Technipion
 
Es funktioniert doch. Ich hatte übersehen, dass man dann auch Breite/Höhe negativ setzen muss
Danke
 
Zurück