Aplicação de filtros e efeitos
Vamos explorar como aplicar filtros e efeitos às imagens no HTML Canvas, adicionando um toque especial à sua manipulação visual.
Brilho (Brightness):
Para aumentar ou diminuir o brilho de uma imagem, você pode utilizar o filtro de brilho. Veja como:
contexto.filter = 'brightness(150%)'; // Aumenta o brilho em 50% contexto.drawImage(imagem, 50, 50, 100, 80);
Contraste (Contrast):
O filtro de contraste ajusta a diferença entre as cores. Exemplo:
contexto.filter = 'contrast(200%)'; // Aumenta o contraste em 100% contexto.drawImage(imagem, 200, 50, 100, 80);
Saturação (Saturation):
A saturação controla a intensidade das cores. Veja um exemplo:
contexto.filter = 'saturate(200%)'; // Aumenta a saturação em 100% contexto.drawImage(imagem, 350, 50, 100, 80);
Desfoque (Blur):
O desfoque suaviza a imagem. Aqui está como aplicar:
contexto.filter = 'blur(5px)'; // Aplica um desfoque de 5 pixels contexto.drawImage(imagem, 50, 200, 100, 80);
Matriz de Cores (Color Matrix):
Você pode criar efeitos mais avançados usando matrizes de cores. Veja um exemplo de escala de cinza:
contexto.filter = 'grayscale(100%)'; // Converte a imagem para escala de cinza contexto.drawImage(imagem, 200, 200, 100, 80);
Estes são apenas alguns exemplos de filtros que você pode aplicar.
Experimente diferentes valores e combinações para criar efeitos únicos. Lembre-se de redefinir o filtro para seu estado original quando necessário:
contexto.filter = 'none'; // Remove todos os filtros aplicados
Vamos ver um exemplo completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplicação de Filtros e Efeitos no Canvas</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="meuCanvas" width="500" 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 filtro
contexto.drawImage(imagem, 50, 50, 100, 80);
// Filtro de brilho
contexto.filter = 'brightness(150%)';
contexto.drawImage(imagem, 200, 50, 100, 80);
// Filtro de contraste
contexto.filter = 'contrast(200%)';
contexto.drawImage(imagem, 350, 50, 100, 80);
// Filtro de saturação
contexto.filter = 'saturate(200%)';
contexto.drawImage(imagem, 50, 200, 100, 80);
// Filtro de desfoque
contexto.filter = 'blur(5px)';
contexto.drawImage(imagem, 200, 200, 100, 80);
// Filtro de escala de cinza
contexto.filter = 'grayscale(100%)';
contexto.drawImage(imagem, 350, 200, 100, 80);
// Remover filtros
contexto.filter = 'none';
contexto.drawImage(imagem, 50, 350, 100, 80);
};
</script>
</body>
</html>
Visualização do código
Com essas técnicas, você pode adicionar uma dimensão artística e criativa à manipulação de imagens no HTML Canvas.
Continue explorando para descobrir as possibilidades infinitas de expressão visual.
