CanvasRenderingContext2D.transform()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

Voir aussi la méthode setTransform() qui réinitialise la transformation courante à la matrice identité puis invoque transform().

Syntaxe

void ctx.transform(a, b, c, d, e, f);

La matrice de transformation est décrite par : $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$

Paramètres

a (m11): Échelle horizontale.
b (m12): Inclinaison horizontale.
c (m21): Inclinaison verticale.
d (m22): Échelle verticale.
e (dx): Déplacement horizontal.
f (dy): Déplacement vertical.

Exemples

Utilisation de la méthode `transform`

Ceci est seulement un fragment de code simple utilisant la méthode transform.

HTML

html

<canvas id="canevas"></canvas>

JavaScript

var canevas = document.getElementById("canevas");
var ctx = canevas.getContext("2d");

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

Code jouable

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.transform(1,1,0,1,0,0);
ctx.fillRect(0,0,100,100);</textarea
>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  eval(textarea.value);
  ctx.restore();
}

reset.addEventListener("click", function () {
  textarea.value = code;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);