Transformações - JavaScript

O elemento canvas suporta transformações de formas, como movimentação, rotação e escalonamento.

Movimentação

A movimentação é realizada por meio do método translate():

translate(x, y)

O primeiro parâmetro indica o deslocamento ao longo do eixo X, e o segundo parâmetro ao longo do eixo Y.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    </head>
    <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

        context.fillStyle = 'blue';
        context.fillRect(50, 50, 100, 100);

        context.globalAlpha = 0.5; // Define a transparência para sobreposição
        context.fillStyle = 'red';
        context.translate(50, 25); // Desloca 50 pixels para a direita e 25 pixels para baixo
        context.fillRect(50, 50, 100, 100);
    </script>
    </body>
</html>

Nesse exemplo, dois retângulos iguais são desenhados na mesma posição: um azul e um vermelho. No entanto, o retângulo vermelho passa por uma transformação de movimentação.

Rotação

A rotação é realizada por meio do método rotate():

rotate(angle)

Esse método recebe como parâmetro o ângulo de rotação em radianos, considerando como ponto de referência as coordenadas (0, 0).

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(50, 20, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.rotate(0.52); // Rotaciona 0.52 radianos ou 30 graus
context.fillRect(50, 20, 100, 100);

Rotacionando figuras no canvas em JavaScript

Escalonamento

O escalonamento é realizado por meio do método scale():

scale(x, y)

O primeiro parâmetro indica o fator de escala ao longo do eixo X, e o segundo parâmetro ao longo do eixo Y.

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(0, 0, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.scale(1.5, 1.5); // Estica 1.5 vezes na largura e comprime 1.5 vezes na altura
context.fillRect(0, 0, 100, 100);

Escalando figuras no canvas em JavaScript

Transformações compostas

Podemos aplicar várias transformações em sequência, se necessário:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(0, 0, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.scale(1.5, 1.5);
context.translate(100, 10);
context.rotate(0.34);
context.fillRect(0, 0, 100, 100);

O contexto do elemento canvas também fornece o método transform(), que permite definir a matriz de transformação:

transform(a, b, c, d, e, f)

Todos os parâmetros desse método representam, em sequência, os elementos da matriz de transformação:

a: escalonamento ao longo do eixo X
b: rotação ao redor do eixo X
c: rotação ao redor do eixo Y
d: escalonamento ao longo do eixo Y
e: deslocamento horizontal
f: deslocamento vertical

Exemplo:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(100, 30, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = "red";
// Aplicando transformações
context.transform(
    Math.cos(Math.PI / 6), Math.sin(Math.PI / 6), -Math.sin(Math.PI / 6),
    Math.cos(Math.PI / 6), 0, 0
);
context.fillRect(100, 30, 100, 100);

Transformações compostas no canvas em JavaScript

Substituindo Transformações

Ao aplicar várias transformações em sequência, elas são aplicadas de forma cumulativa às formas. No entanto, pode surgir a necessidade de substituir a transformação existente, aplicando uma nova em vez de acumular as anteriores. Para isso, utilizamos o método setTransform():

setTransform(a, b, c, d, e, f)

Os parâmetros representam a matriz de transformação, sendo seu uso semelhante ao método transform(). Exemplo:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let k = 0;
for (let x = 0; x < 30; x++) {
    k = Math.floor(255 / 34 * x);
    context.fillStyle = "rgb(" + k + "," + k + "," + k + ")";
    context.fillRect(50, 50, 200, 100);
    context.setTransform(1, 0, 0, 1, x, x);
}

Resetando Transformações

Ao aplicar transformações, todas as formas desenhadas posteriormente são afetadas por essas transformações. Porém, em determinadas situações, após aplicar uma transformação, não queremos mais que ela seja aplicada. Para resetar as transformações e garantir que nenhuma transformação adicional seja aplicada, utilizamos o método resetTransform():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(100, 10, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.translate(50, 25);
// Aplicando transformação
context.fillRect(100, 10, 100, 100);

context.fillStyle = "green";
context.resetTransform();
// A transformação não é mais aplicada
context.fillRect(0, 10, 100, 100);

Resetando transformações no canvas em JavaScript

Este é o guia sobre como realizar transformações utilizando o canvas no JavaScript. As transformações permitem criar efeitos visuais dinâmicos e interessantes, manipulando formas de maneira flexível.