Transformações e rotações
Vamos agora explorar as transformações e rotações no HTML Canvas, permitindo que você manipule e posicione suas imagens de maneira mais dinâmica.
Para aplicar uma transformação, como escala ou rotação, você pode utilizar métodos específicos do contexto do Canvas. Aqui estão alguns exemplos simples:
Escala (Scale):
contexto.scale(2, 2); // Aumenta a escala em 2 vezes contexto.drawImage(imagem, 50, 50, 100, 80);
Isso aumentará a escala da imagem em 2 vezes. Substitua os valores de 2 por outros para ajustar a escala conforme necessário.
Rotação (Rotation):
contexto.rotate(Math.PI / 4); // Rotaciona a imagem 45 graus contexto.drawImage(imagem, 50, 50, 100, 80);
Isso rotacionará a imagem em 45 graus no sentido horário. Utilize valores diferentes para ajustar a quantidade de rotação.
Transformação Geral (Transform):
contexto.transform(1, 0.5, -0.5, 1, 30, 10); // Transformação personalizada contexto.drawImage(imagem, 50, 50, 100, 80);
Este exemplo aplica uma transformação personalizada usando os valores a, b, c, d, e, e f como parâmetros.
As transformações são cumulativas, o que significa que cada nova transformação é aplicada com base na última. Se quiser voltar à configuração original, utilize setTransform:
contexto.setTransform(1, 0, 0, 1, 0, 0); // Restaura a transformação para a configuração padrão
Vamos deixar os exemplos mais completos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformações e Rotações no Canvas</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="meuCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("meuCanvas");
var contexto = canvas.getContext("2d");
var imagem = new Image();
imagem.src = 'caminho/para/sua/imagem.jpg';
imagem.onload = function() {
// Sem transformação
contexto.drawImage(imagem, 20, 20, 100, 80);
// Escala
contexto.scale(2, 2);
contexto.drawImage(imagem, 150, 20, 100, 80);
// Rotação
contexto.rotate(Math.PI / 4);
contexto.drawImage(imagem, 300, 20, 100, 80);
// Transformação personalizada
contexto.setTransform(1, 0.5, -0.5, 1, 30, 150);
contexto.drawImage(imagem, 20, 150, 100, 80);
};
</script>
</body>
</html>
Visualização do código
Experimente diferentes combinações de escalas e rotações para criar efeitos visuais únicos.
Nos próximos tópicos, abordaremos a aplicação de filtros e efeitos para aprimorar ainda mais suas habilidades de manipulação de imagens no HTML Canvas. Continue praticando.
