canvas : Bilder horizontal spiegeln


Jofre

Erfahrenes Mitglied
#1
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
 

Technipion

Erfahrenes Mitglied
#2
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