DOMMatrix.skewYSelf() — Methode · JavaScript-Referenz

Signatur

DOMMatrix.prototype.skewYSelf(sY)

Beschreibung

skewYSelf() wendet eine vertikale Scherung (Skew) auf eine bestehende DOMMatrix an und verändert dabei das Objekt selbst. Die Matrix wird von rechts mit der Scherungsmatrix multipliziert (Post-Multiplikation): this = this × skewY(sY). Bei einer 2D-Matrix heißt das: Der Eintrag b bzw. m12 wird um tan(sY) beeinflusst, sodass jeder Punkt abhängig von seiner x-Koordinate vertikal verschoben wird.

Die Methode ist das veränderliche Gegenstück zu DOMMatrixReadOnly.prototype.skewY(), die eine neue Matrix zurückgibt und die ursprüngliche unverändert lässt. skewYSelf() bietet sich an, wenn du eine Transformation Schritt für Schritt aufbaust (z. B. in einer Animationsschleife) und dabei keine unnötigen Zwischenobjekte erzeugen willst.

Weil die Methode die Matrix selbst zurückgibt, lassen sich Aufrufe verketten, etwa m.translateSelf(50, 0).skewYSelf(15). Die fertige Matrix kannst du direkt an CanvasRenderingContext2D.setTransform() übergeben oder per toString() als CSS-transform nutzen.

Parameter

Name	Typ	Default	Beschreibung
$sY	number	0	Scherwinkel entlang der Y-Achse in Grad (nicht im Bogenmaß). Positive Werte kippen die Form nach unten, wenn x größer wird.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Dieselbe, jetzt veränderte DOMMatrix-Instanz (this). Deshalb lassen sich Aufrufe verketten.

Beispiele

Einheitsmatrix vertikal scheren

const m = new DOMMatrix();
m.skewYSelf(30);

// b (= m12) enthält jetzt tan(30°)
console.log(m.b.toFixed(4));
console.log(m.is2D);

0.5774 true

Veränderlich vs. unveränderlich: skewYSelf() und skewY()

const original = new DOMMatrix();

// skewY() erzeugt eine neue Matrix, original bleibt unverändert
const kopie = original.skewY(45);
console.log(original.b, kopie.b.toFixed(2));

// skewYSelf() ändert das Objekt selbst und gibt es zurück
const ergebnis = original.skewYSelf(45);
console.log(original.b.toFixed(2), ergebnis === original);

0 1.00 1.00 true

Verkettete Transformation für ein Canvas

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const matrix = new DOMMatrix()
  .translateSelf(100, 50)
  .skewYSelf(20)
  .scaleSelf(1.5);

ctx.setTransform(matrix);
ctx.fillStyle = 'tomato';
ctx.fillRect(0, 0, 80, 40); // wird verschoben, geschert und skaliert gezeichnet

Animierte Scherung ohne neue Objekte pro Frame

const box = document.querySelector('.box');
const matrix = new DOMMatrix();
let winkel = 0;

const tick = () => {
  winkel = (winkel + 1) % 30;
  // Matrix zurücksetzen und neu scheren, ohne neue Instanz zu erzeugen
  matrix.setMatrixValue('none').skewYSelf(winkel);
  box.style.transform = matrix.toString();
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Grad statt Bogenmaß: Anders als bei Math.tan() oder ctx.rotate() wird der Winkel in Grad erwartet. Wenn du Math.PI / 6 übergibst, erhältst du nur eine Scherung von etwa 0,52°.
Reihenfolge zählt: Es wird von rechts multipliziert. translateSelf(…).skewYSelf(…) ergibt ein anderes Ergebnis als skewYSelf(…).translateSelf(…).
Extremwerte: Bei Winkeln nahe ±90° geht tan() gegen unendlich. Die Matrix bekommt dann riesige Werte und kann nicht mehr sinnvoll dargestellt werden.
Nur bei DOMMatrix: DOMMatrixReadOnly hat keine …Self()-Methoden. Dort verwendest du skewY().
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch in Web Workern. Node.js stellt DOMMatrix nicht von Haus aus bereit. Dort brauchst du ein Polyfill oder eine Bibliothek wie canvas.

Siehe auch

DOMMatrix DOMMatrixReadOnly.skewY() DOMMatrix.skewXSelf() DOMMatrix.rotateSelf() DOMMatrix.translateSelf() CanvasRenderingContext2D.setTransform() TimeRanges.end()